Poznaj Programowanie

Tagi HTML: area

Piotr Grochal 6 min. czytania

Tag <area> definiuje klikalny obszar na mapie obrazu (image map) – obrazie z wieloma interaktywnymi regionami prowadzącymi do różnych miejsc docelowych. Element <area> działa wyłącznie w połączeniu z <map> oraz atrybutem usemap w <img>.

Jak działa mapa obrazu?

Mapa obrazu to współdziałanie trzech elementów:

  1. <img> z atrybutem usemap – wskazuje, której mapy użyć;
  2. <map> z atrybutem name (lub id) – definiuje zestaw obszarów;
  3. <area> – określa klikalne regiony wewnątrz mapy.

Atrybut usemap w <img> odwołuje się do mapy przez nazwę poprzedzoną # (np. usemap="#workmap"), która odpowiada wartości name lub id w <map>.

Struktura HTML

Oto podstawowy przykład mapy obrazu z trzema obszarami:

<img src="workplace.jpg" alt="Miejsce pracy" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Komputer" href="computer.html">
<area shape="rect" coords="290,172,333,250" alt="Telefon" href="phone.html">
<area shape="circle" coords="337,300,44" alt="Filiżanka kawy" href="coffee.html">
</map>

Atrybuty tagu <area>

Atrybuty kluczowe

Poniższa tabela podsumowuje najważniejsze atrybuty <area> wraz z krótkim opisem:

Atrybut Opis
shape Określa kształt obszaru: rect, circle, poly, default.
coords Określa współrzędne wierzchołków obszaru; interpretacja zależy od wartości shape.
href Określa adres docelowy łącza.
alt Tekst alternatywny dla obszaru (wymagany, jeśli istnieje href).
target Sposób otwarcia łącza: _blank, _self, _parent, _top.
download Wskazuje, że zasób ma zostać pobrany na dysk użytkownika (wymaga zgodności pochodzenia lub odpowiednich nagłówków CORS).

Atrybuty dodatkowe

Gdy <area> działa jak łącze, możesz użyć także tych atrybutów:

  • rel – relacja między dokumentami (np. nofollow, noopener, noreferrer);
  • hreflang – język zasobu docelowego (np. pl, en);
  • type – typ MIME zasobu (np. application/pdf);
  • ping – lista adresów do powiadomienia (raportowanie kliknięć);
  • referrerpolicy – polityka odsyłającego (np. no-referrer, origin).

Kształty obszarów – szczegółowy opis

1. Prostokąt (shape="rect")

Definiuje prostokątny obszar za pomocą współrzędnych górnego lewego i dolnego prawego rogu:

<area shape="rect" coords="x1,y1,x2,y2" href="strona.html" alt="Opis">

Parametry – x1,y1 to współrzędne lewego górnego wierzchołka; x2,y2 to współrzędne prawego dolnego wierzchołka.

Przykład – prostokątny obszar linkujący do Google:

<img src="mapa.gif" alt="Mapa" usemap="#szukacz">
<map name="szukacz">
<area shape="rect" coords="169,41,284,224" href="https://www.google.pl" alt="Google">
</map>

2. Koło (shape="circle")

Definiuje okrągły obszar za pomocą współrzędnych środka i promienia:

<area shape="circle" coords="x,y,r" href="strona.html" alt="Opis">

Parametry – x,y to środek koła; r to promień wyrażony w pikselach.

Przykład – dwa obszary kołowe na mapie planet:

<map name="planetmap">
<area shape="circle" coords="90,58,3" href="mercury.html" alt="Merkury">
<area shape="circle" coords="124,58,8" href="venus.html" alt="Wenus">
</map>

3. Wielokąt (shape="poly")

Definiuje wielokątny obszar za pomocą serii współrzędnych wierzchołków:

<area shape="poly" coords="x1,y1,x2,y2,...,xN,yN" href="strona.html" alt="Opis">

Parametry – lista par x,y określających kolejne wierzchołki wielokąta (ostatni punkt nie musi powtarzać pierwszego).

Przykład – obszar o złożonym kształcie:

<map name="animals">
<area shape="poly" coords="14,13,134,185,36,166,185,44" href="malpa.html" alt="Małpa">
</map>

4. Całkowity obszar (shape="default")

Reprezentuje cały pozostały obszar obrazu, który nie jest pokryty innymi obszarami:

<area shape="default" href="strona-domyslna.html" alt="Cała strona">

Kompletny przykład

Poniższy, kompletny dokument pokazuje współdziałanie <img>, <map> i kilku <area>:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Mapa obrazu</title>
</head>
<body>
<h1>Kliknij na elementy mapy</h1>
<img src="planets.gif" width="145" height="126" alt="Planety" usemap="#planetmap">
<map name="planetmap" id="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Słońce">
<area shape="circle" coords="90,58,3" href="mercury.html" alt="Merkury">
<area shape="circle" coords="124,58,8" href="venus.html" alt="Wenus">
<area shape="default" href="inne.html" alt="Inne planety">
</map>
</body>
</html>

Atrybuty target i download

Otwieranie w nowym oknie

Tak ustawisz otwieranie linku w nowej karcie/oknie:

<area shape="circle" coords="90,58,3" href="mercury.html" alt="Merkury" target="_blank">

Wartości target – dostępne są następujące tryby:

  • _blank – otwarcie w nowej karcie/oknie;
  • _self – bieżąca karta/okno (domyślnie);
  • _parent – ramka nadrzędna (frameset);
  • _top – pełne okno, bez ramek.

Pobieranie pliku

Użyj download, aby wymusić pobranie zamiast otwierania w przeglądarce:

<area shape="circle" coords="11,22,5" href="mars_ok_77.html" alt="Mars" download="Mars">

Pamiętaj: pobieranie z innej domeny może wymagać prawidłowej konfiguracji CORS.

Ważne informacje

Przed wdrożeniem zwróć uwagę na te zasady działania <area>:

  • element pusty – <area> nie ma treści i nie używa znacznika zamykającego;
  • tylko wewnątrz <map> – obszary zawsze muszą być zagnieżdżone w elemencie mapy;
  • tekst alternatywny – atrybut alt jest wymagany, jeśli ustawiono href;
  • niewidoczny w układzie – domyślnie <area> nie jest renderowany (pełni funkcję interaktywną).

Praktyczne zastosowania

Mapy obrazu z tagiem <area> świetnie sprawdzają się w takich scenariuszach:

  • interaktywne diagramy i schematy,
  • mapy geograficzne z klikalnymi regionami,
  • ilustracje naukowe z opisanymi obszarami,
  • gry edukacyjne,
  • interfejsy użytkownika oparte na obrazach.

Tag <area> pozwala tworzyć interakcje bez skryptów JavaScript, choć w nowoczesnych interfejsach bywa zastępowany technikami SVG, CSS lub komponentami reagującymi na zdarzenia.

Dobre praktyki i dostępność

Aby mapa obrazu była czytelna, responsywna i bezpieczna, stosuj poniższe wskazówki:

  • dostępność – używaj opisowych alt; gdy potrzebujesz dłuższego opisu, rozważ aria-label lub aria-describedby na <area>;
  • responsywność – współrzędne coords odnoszą się do naturalnych rozmiarów obrazu; przy skalowaniu grafiki użyj skryptów do przeliczeń lub obrazów bez zmiany proporcji;
  • kolejność i nakładanie – przy nachodzących na siebie obszarach, pierwsze w DOM mają priorytet kliknięcia, więc uporządkuj je od najbardziej szczegółowych do najbardziej ogólnych;
  • bezpieczeństwo przy _blank – dodaj rel="noopener noreferrer", aby zapobiec przejęciu kontekstu przez stronę docelową;
  • spójne alternatywy – zapewnij linki tekstowe poza obrazem, jeśli treść ma krytyczne znaczenie dla nawigacji.