Poznaj Programowanie

Tagi HTML: map

Piotr Grochal 6 min. czytania

Tag <map> to jeden z najprostszych sposobów na tworzenie klikalnych obszarów na obrazach. Pozwala zamienić statyczną grafikę w interaktywną mapę odsyłaczy, w której różne regiony prowadzą do innych stron, wywołują zdarzenia lub uruchamiają skrypty JavaScript. To rozwiązanie po stronie klienta, które nie wymaga dodatkowych bibliotek — wystarczy HTML oraz opcjonalnie CSS i JavaScript.

W tym wpisie poznasz definicję i składnię tagu <map>, najważniejsze atrybuty, praktyczne przykłady z kodem, integrację z JavaScript oraz nowoczesne alternatywy (np. web components Google Maps). Dzięki temu zbudujesz mapy edukacyjne, menu graficzne i interaktywne schematy — szybko i skutecznie.

Czym jest tag <map> i do czego służy?

Tag <map> definiuje kontener dla mapy obrazu — zbioru klikalnych obszarów <area> powiązanych z elementem <img>. Aby mapa działała, obraz musi mieć atrybut usemap wskazujący na atrybut name odpowiadającego mu elementu <map> (z prefiksem #).

Najważniejsze zalety tego podejścia to:

  • lekkość i natywność – podstawowe funkcje działają bez JavaScript;
  • precyzja obszarów – obsługa prostokątów, kół i wielokątów, co pozwala dokładnie wyznaczać regiony;
  • dostępność – wsparcie dla czytników ekranu dzięki atrybutom tekstowym (np. alt w <area>).

Wady: współrzędne coords definiuje się ręcznie (często wymaga to narzędzi do pomiaru pikseli); w zastosowaniach geograficznych lepszym wyborem są interaktywne mapy (np. Google Maps) z wbudowaną nawigacją i zoomem.

Podstawowa składnia i atrybuty

Element <map> wymaga atrybutu name (np. "mojaMapa"). Ten identyfikator musi odpowiadać wartości atrybutu usemap w <img> (np. usemap="#mojaMapa").

Najważniejsze atrybuty elementu <map> to:

  • name – wymagany, unikatowa nazwa mapy używana w usemap="#name";
  • globalne – id, class, style, title;
  • zdarzenia – np. onclick, onmouseover, w razie potrzeby obsługi interakcji.

Kluczowy element powiązany to <area> — każdy taki znacznik definiuje osobny obszar mapy z poniższymi atrybutami:

  • shape – kształt obszaru: rect (prostokąt), circle (koło), poly (wielokąt) lub default (cały obraz);
  • coords – lista liczb określająca współrzędne (np. dla rect: x1,y1,x2,y2);
  • href – adres URL celu (jeśli obszar ma być odsyłaczem);
  • alt – tekst alternatywny (wymagany dla dostępności, gdy jest href);
  • target – sposób otwierania odsyłacza, np. _blank, _self;
  • zdarzenia JS – np. onclick do obsługi własnych akcji po kliknięciu.

Dla szybkiej orientacji, format współrzędnych dla poszczególnych kształtów wygląda tak:

Kształt (shape) Format coords Przykład
rect x1,y1,x2,y2 300,100,500,200
circle x,y,r (środek i promień) 200,400,50
poly lista par x,y 450,250,500,300,550,280,520,220
default bez współrzędnych obejmuje cały obraz

Aby wyznaczyć koordynaty, skorzystaj z narzędzi deweloperskich przeglądarki lub edytorów online (np. ImageMaps/HTML Map Editor).

Praktyczny przykład 1 — prosta mapa Polski z regionami

Załóżmy, że masz obraz polska.gif o wymiarach 800×600 px i chcesz, aby kliknięcie wybranych województw prowadziło do stron ze szczegółami. Oto kompletny szablon strony:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Interaktywna Mapa Polski</title>
<style>
img { border: 2px solid #ccc; cursor: pointer; }
</style>
</head>
<body>
<h1>Mapa Województw Polski</h1>
<img src="polska.gif" alt="Mapa Polski z regionami" usemap="#polskaMap" width="800" height="600">
<map name="polskaMap">
<!-- Mazowieckie: prostokąt (x1,y1,x2,y2) -->
<area shape="rect" coords="300,100,500,200" href="mazowieckie.html" alt="Mazowieckie">
<!-- Dolnośląskie: koło (x,y,r) -->
<area shape="circle" coords="200,400,50" href="dolnoslaskie.html" alt="Dolnośląskie">
<!-- Wielkopolskie: wielokąt (lista x,y) -->
<area shape="poly" coords="450,250,500,300,550,280,520,220" href="wielkopolskie.html" alt="Wielkopolskie">
<!-- Domyślny obszar -->
<area shape="default" href="index.html" alt="Powrót do strony głównej">
</map>
</body>
</html>

Po kliknięciu w dany region następuje przejście do przypisanego adresu URL — pamiętaj, aby dostosować wartości coords do własnego obrazu.

Zaawansowany przykład 2 — mapa edukacyjna z JavaScript i tooltipami

Aby dodać zachowanie po kliknięciu, zdefiniuj prostą funkcję JavaScript (w <head> lub w osobnym pliku):

function pokazInfo(wojewodztwo) {
alert(`Ciekawostka o ${wojewodztwo}: Największe miasto to Warszawa!`);
}

Następnie podłącz ją w wybranym obszarze <area> (na przykład dla Mazowieckiego):

<area shape="rect" coords="300,100,500,200" onclick="pokazInfo('Mazowieckie'); return false;" href="mazowieckie.html" alt="Mazowieckie" title="Kliknij po info">

Jeśli chcesz dodać podpowiedzi (tooltipy), możesz użyć natywnego atrybutu title lub własnego komponentu wyświetlanego na zdarzeniach mouseover/focus.

Przykład 3 — integracja z CSS dla efektów wizualnych

Przykładowa stylizacja (pamiętaj, że <area> nie renderuje się wizualnie, więc wiele właściwości CSS może nie mieć efektu):

/* Przykładowe style wspomagające dostępność/nawigację klawiaturą */
area[href]:focus {
outline: 3px solid #1976d2;
}

W praktyce do efektów podświetlenia regionów używa się nakładek graficznych, SVG lub skryptów, które dynamicznie rysują highlight nad obrazem.

Nowoczesne alternatywy: mapy Google w HTML (nie mylić z <map>)

Do map geograficznych rozważ web components Google: <gmp-map> i <gmp-advanced-marker> — wymagany jest klucz API. Przykładowe osadzenie:

<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=TWOJ_KLUCZ&libraries=maps,marker&v=beta" defer></script>
</head>
<body>
<gmp-map center="52.2297,21.0122" zoom="6" map-id="DEMO_MAP_ID" style="height: 400px; width: 100%;">
<gmp-advanced-marker position="52.2297,21.0122" title="Warszawa"></gmp-advanced-marker>
</gmp-map>
</body>
</html>

Narzędzia i dobre praktyki

Poniżej znajdziesz sprawdzone wskazówki, które ułatwią pracę z mapami obrazów:

  • generatory współrzędnych – użyj HTML Map Editor (online) lub GIMP/Photoshop z wtyczkami do odczytu pikseli;
  • dostępność – każda <area> z href powinna mieć znaczący alt (lub aria-label), a obraz <img> opisowy alt lub pusty alt="" dla dekoracyjnych grafik;
  • responsywność – natywne coords nie wspiera wartości procentowych; zastosuj skrypty przeskalowujące współrzędne (np. „responsive image maps”) albo użyj SVG dla w pełni skalowalnych, interaktywnych regionów;
  • testowanie – weryfikuj działanie w różnych przeglądarkach i na urządzeniach; dla zachowania funkcji na „pustym” tle rozważ shape="default";
  • bezpieczeństwo – unikaj schematu javascript: w href; logikę obsługuj w zdarzeniach JS i sanituzuj dane wejściowe.

Podsumowujące wskazówki dla programistów

Tag <map> doskonale sprawdza się w interaktywnych grafikach: od prostych menu po rozbudowane schematy i mapy edukacyjne. Łącz go z SVG lub nakładkami JS, aby uzyskać responsywność i atrakcyjne efekty wizualne. W projektach typu drill‑down (region → miasto → ulica) rozważ ładowanie kolejnych widoków dynamicznie (AJAX/Fetch) dla lepszego UX.