<area>

Klikalny obszar mapy obrazu: prostokąt, koło lub wielokąt z własnym adresem.

Wyświetlanie: niewidoczny (działa jako obszar obrazu)
Znacznik zamykający: Brak, element pusty
Dozwolona zawartość: Brak, element pusty

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<img
  src="/collections/covers/python-czy-javascript.webp"
  alt="Dwa biurka: po lewej monitor z wykresami, po prawej laptop z projektem strony"
  width="360"
  height="240"
  usemap="#devices"
>
<map name="devices">
  <area shape="rect" coords="52,72,152,128" href="/dokumentacja/python" alt="Monitor z wykresami: dokumentacja Pythona">
  <area shape="rect" coords="210,80,300,144" href="/dokumentacja/javascript" alt="Laptop z projektem strony: dokumentacja JavaScriptu">
</map>

Podgląd

Obszary są niewidoczne. Najedź kursorem na monitor lub laptop albo przejdź po nich klawiszem Tab.

Definicja i zastosowanie

Element <area> definiuje jeden klikalny fragment obrazu wewnątrz <map>. Działa jak link <a>: ma atrybut href, może otwierać adres w nowej karcie (target) albo pobierać plik (download). Jest elementem pustym.

Kształt wybierasz atrybutem shape, a położenie podajesz w coords jako liczby w pikselach liczone od lewego górnego rogu obrazu. Prostokąt opisują dwa narożniki, koło środek i promień, a wielokąt kolejne wierzchołki.

Obszar z href musi mieć alt, bo to jedyna nazwa, jaką czytnik ekranu może odczytać. Sam obszar jest niewidoczny: zdradza go dopiero zmiana kursora albo obrys fokusu po wybraniu go klawiszem Tab.

Składnia

<area shape="rect" coords="x1,y1,x2,y2" href="…" alt="…">

Atrybuty

shape
rect | circle | poly | default
Kształt obszaru: rect to prostokąt (domyślnie), circle koło, poly dowolny wielokąt, a default cały obraz poza pozostałymi obszarami. Przykład pokazuje koło na plakacie i wielokąt obrysowujący laptopa.
coords
lista liczb rozdzielonych przecinkami
Współrzędne w pikselach. Dla rect to lewy górny i prawy dolny róg (x1,y1,x2,y2), dla circle środek i promień (x,y,r), a dla poly kolejne wierzchołki (x1,y1,x2,y2,…).
href
URL
Adres, pod który prowadzi obszar. Bez href obszar nie jest linkiem.
alt
tekst
Tekst alternatywny obszaru, wymagany, gdy obszar ma href. Powinien mówić, dokąd prowadzi kliknięcie.
target / download / rel
jak w elemencie `<a>`
Działają tak samo jak w odnośniku: target="_blank" otwiera adres w nowej karcie, download pobiera plik zamiast go otwierać, a rel opisuje relację z celem.

Atrybut	Wartości	Opis
shape	rect \| circle \| poly \| default	Kształt obszaru: `rect` to prostokąt (domyślnie), `circle` koło, `poly` dowolny wielokąt, a `default` cały obraz poza pozostałymi obszarami. Przykład pokazuje koło na plakacie i wielokąt obrysowujący laptopa.
coords	lista liczb rozdzielonych przecinkami	Współrzędne w pikselach. Dla `rect` to lewy górny i prawy dolny róg (`x1,y1,x2,y2`), dla `circle` środek i promień (`x,y,r`), a dla `poly` kolejne wierzchołki (`x1,y1,x2,y2,…`).
href	URL	Adres, pod który prowadzi obszar. Bez `href` obszar nie jest linkiem.
alt	tekst	Tekst alternatywny obszaru, wymagany, gdy obszar ma `href`. Powinien mówić, dokąd prowadzi kliknięcie.
target / download / rel	jak w elemencie `<a>`	Działają tak samo jak w odnośniku: `target="_blank"` otwiera adres w nowej karcie, `download` pobiera plik zamiast go otwierać, a `rel` opisuje relację z celem.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

shape

rect | circle | poly | default

Kształt obszaru: rect to prostokąt (domyślnie), circle koło, poly dowolny wielokąt, a default cały obraz poza pozostałymi obszarami. Przykład pokazuje koło na plakacie i wielokąt obrysowujący laptopa.

HTML

<img
  src="/collections/covers/python-czy-javascript.webp"
  alt="Dwa biurka: po lewej monitor z wykresami, po prawej laptop z projektem strony"
  width="360"
  height="240"
  usemap="#shapes"
>
<map name="shapes">
  <area shape="circle" coords="250,36,12" href="/kolekcje" alt="Plakat na ścianie: kolekcje artykułów">
  <area shape="poly" coords="214,83,287,83,287,128,296,140,212,140" href="/dokumentacja/html" alt="Laptop: dokumentacja HTML">
</map>

Podgląd

Najedź kursorem na okrągły kształt na plakacie albo na laptopa.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

<area> działa tylko wewnątrz <map>, a obraz musi wskazywać mapę atrybutem usemap.
Współrzędne dotyczą obrazu w rozmiarze wyświetlanym na stronie, a nie oryginalnego pliku. Jeśli zmienisz width obrazu, przelicz też coords.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs