Element `` pozwala zamienić pojedynczy obraz w zestaw osobnych, klikalnych stref. W praktyce html area to rozwiązanie dla planów, map, schematów i infografik, gdzie jeden kadr ma prowadzić do kilku różnych miejsc. Poniżej pokazuję, jak to działa, jakich atrybutów nie pomylić i kiedy lepiej wybrać prostszą nawigację albo SVG.
Najważniejsze fakty o mapach obrazów i elemencie ``
- `` działa wyłącznie wewnątrz `
- Najczęściej używa się kształtów `rect`, `circle`, `poly` oraz `default`.
- Jeśli `href` jest obecny, opis w `alt` powinien być konkretny, bo to realna treść linku.
- Mapy obrazów są mniej wygodne na małych ekranach niż zwykłe linki albo SVG.
- Najlepiej sprawdzają się przy statycznych grafikach z wyraźnie oddzielonymi strefami.
Do czego służy element ``
Ja traktuję ten element jako sposób na zrobienie z jednego obrazu kilku niezależnych linków. Każdy taki fragment to hotspot, czyli aktywny obszar na ilustracji; jeśli `href` nie występuje, strefa staje się martwa i nie prowadzi nigdzie. To ma sens przede wszystkim wtedy, gdy sama grafika niesie znaczenie: plan budynku, schemat urządzenia, mapa, dashboard z ikonami albo infografika z regionami do kliknięcia. W zwykłej nawigacji prawie zawsze wygrają linki tekstowe, ale przy dobrze zaprojektowanej grafice `` nadal bywa najprostszym rozwiązaniem.
Sama idea jest prosta, ale prawdziwa wartość wychodzi dopiero przy składaniu mapy i dopasowaniu jej do obrazu, więc przechodzę od razu do praktyki.
Jak zbudować mapę obrazu krok po kroku
Najpewniejszy schemat jest zawsze ten sam: `` dostaje `usemap`, `
Przeczytaj również: Gradienty CSS - Jak je wykorzystać w nowoczesnym UI?
Minimalny układ HTML
To działa, bo obraz i mapa są ze sobą sparowane przez identyczną nazwę: `usemap="#plan-pietra"` wskazuje na `map name="plan-pietra"`.
Jeżeli chcesz, by klikalna była cała grafika, możesz użyć obszaru domyślnego, ale wtedy sens mapy mocno się kurczy i częściej lepiej wrócić do zwykłego `` wokół ``. W praktyce wybieram to tylko wtedy, gdy potrzebuję jednej ilustracji z pojedynczym wyjątkiem, a nie pełnej siatki hotspotów.
Po samej składni zostają jeszcze atrybuty, które decydują, czy link jest poprawny i czytelny dla użytkownika.
Atrybuty, które naprawdę mają znaczenie
Najwięcej błędów widzę nie w samym HTML-u, ale w pomyleniu ról atrybutów. Poniższa tabela porządkuje to, co faktycznie trzeba kontrolować.
| Atrybut | Rola | Na co zwracam uwagę |
|---|---|---|
href |
Określa adres docelowy. | Bez niego obszar nie działa jak link; wtedy to strefa nieklikalna. |
alt |
Opis linku dla technologii wspomagających i sytuacji bez obrazu. | Przy aktywnym `href` powinien być konkretny, nie dekoracyjny. |
shape |
Wybiera geometrię hotspotu. | `rect`, `circle` i `poly` wystarczają w większości przypadków; `default` obejmuje cały obraz. |
coords |
Podaje współrzędne kształtu. | Liczy się kolejność i dokładność punktów; jeden błąd przesuwa hotspot. |
name / usemap
|
Łączy obraz z mapą. | Wartość w `usemap` musi wskazywać na `name` poprzedzone `#`. |
W specyfikacji HTML `alt` jest obowiązkowy, gdy obszar ma `href`, a bez `href` obszar nie reprezentuje linku. To detal, który warto zapamiętać, bo później oszczędza poprawki w dostępności i testach.
Najczęściej problemy nie wynikają z samego kodu, tylko z tego, że autor źle policzył punkty albo zapomniał, że obraz po CSS wygląda inaczej niż plik źródłowy. I właśnie tu zaczyna się temat dostępności, bo technicznie poprawny kod nadal może być trudny w obsłudze.
Przykłady, w których mapy obrazów faktycznie pomagają
Ja najczęściej widzę sens w czterech sytuacjach. W każdej z nich chodzi o to samo: obraz ma znaczenie informacyjne, a nie tylko dekoracyjne.
| Przykład | Dlaczego działa | Na co uważać |
|---|---|---|
| Plan budynku | Użytkownik widzi układ pomieszczeń i od razu rozumie, gdzie kliknąć. | Pomieszczenia muszą mieć dość duże hotspoty, bo na mobile drobne strefy stają się męczące. |
| Mapa regionów | Jedna grafika może prowadzić do wielu stron z lokalnym opisem lub ofertą. | Małe regiony bywają trudne do trafienia, więc nie każdy atlas będzie dobrym kandydatem. |
| Infografika produktu | Hotspoty pozwalają rozbić jeden schemat na konkretne sekcje funkcji. | Opis w `alt` musi być naprawdę pomocny, nie marketingowy. |
| Schemat urządzenia | Techniczne rysunki często naturalnie dzielą się na osobne elementy. | Jeżeli układ zmienia się responsywnie, koordynaty trzeba utrzymywać w synchronizacji. |
MDN słusznie zwraca uwagę, że hotspoty powinny być czytelne i wygodne do kliknięcia, a nie tylko zgodne z pikselami projektu. W praktyce wolę strefy większe niż estetycznie „idealne”, bo użytkownik palcem nie trafia z dokładnością grafika z figma exportu.
Jeżeli któraś ze stref ma być mała jak punkt na mapie, zwykle lepiej od razu myśleć o innym rozwiązaniu, bo właśnie tu zaczynają się problemy z dostępnością i responsywnością.
Dostępność i responsywność bez złudzeń
Ta część decyduje o tym, czy mapa obrazu zostaje w projekcie, czy kończy jako ciekawostka z demo. Technicznie wszystko może działać, ale użytkownicy klawiatury, czytników ekranu i telefonów szybko pokażą, gdzie rozwiązanie się rozjeżdża.
- Dbam o kolejność `` tak, by odpowiadała temu, co użytkownik widzi na obrazie. Dzięki temu fokus klawiatury nie skacze chaotycznie.
- Nie pomijam `alt`, bo to tekst alternatywny, który zastępuje samą strefę linku. Bez niego hotspot staje się nieczytelny dla części użytkowników.
- Sprawdzam rozmiar stref. Praktyczny punkt odniesienia to około 72 × 72 CSS px dla wygodnego dotyku, choć oczywiście nie każdy projekt da się do tego idealnie dopasować.
- Testuję klawiaturą, bo mapy obrazów bywają zdradliwe. Jeśli nie da się sensownie przejść przez hotspoty tabulatorem, frontend jest tylko pozornie działający.
- Uważam na skalowanie obrazu. Koordynaty nie przeliczają się magicznie razem z CSS, więc przy responsywnych grafikach trzeba to rozwiązać świadomie, a nie liczyć na przeglądarkę.
- Nie nadużywam tej samej mapy na kilku obrazach. W części przeglądarek potrafi to psuć kolejność fokusu i obniżać użyteczność.
Jeśli chcesz potraktować tę technikę poważnie, zawsze robię jeszcze jeden test: wyłączam obraz lub patrzę na stronę bez myszy. Jeżeli link nadal jest zrozumiały, to znak, że użyteczność stoi na właściwym poziomie.
Po tych ograniczeniach naturalnie pojawia się pytanie, czy `` rzeczywiście jest najlepszym wyborem, czy tylko starym zwyczajem odziedziczonym po dawnym frontendzie.
Kiedy lepiej wybrać SVG, zwykłe linki albo coś prostszego
Wbrew pozorom to nie jest pytanie o technologię, tylko o wygodę utrzymania. Ja bardzo często wybieram prostsze rozwiązanie, jeśli tylko daje ten sam efekt przy mniejszym ryzyku błędu.
| Rozwiązanie | Mocne strony | Słabe strony | Kiedy wybieram |
|---|---|---|---|
| `` i ` | Proste w HTML, szybkie do wdrożenia na statycznej grafice. | Słabiej znosi responsywność i wymaga pilnowania koordynatów. | Gdy obraz jest stały, a strefy są wyraźne i nieliczne. |
| Zwykłe linki tekstowe | Najlepsza czytelność, SEO i dostępność. | Mniej efektowne wizualnie, jeśli projekt wymaga pracy na obrazie. | Gdy priorytetem jest prostota i długowieczność treści. |
| SVG | Skaluje się naturalnie, łatwiej opisać kształty i style. | Wymaga innego przygotowania grafiki niż bitmapa. | Gdy interakcja ma być precyzyjna i responsywna. |
| Canvas + JavaScript | Daje dużą swobodę wizualną i interakcyjną. | Więcej kodu, większy koszt utrzymania, trudniejsza dostępność. | Gdy faktycznie potrzebujesz niestandardowej logiki rysowania. |
Jeśli projekt ma być długowieczny, responsywny i łatwy do utrzymania, SVG bardzo często wygrywa. Jeśli jednak pracujesz na gotowej bitmapie, a strefy są stałe i wyraźne, `` nadal ma sens i potrafi zaoszczędzić sporo pracy.
Właśnie dlatego zostawiam sobie prostą listę kontrolną przed publikacją, bo ona szybko pokazuje, czy rozwiązanie broni się w realnym projekcie.
Co sprawdzam przed publikacją mapy obrazu
- Czy każdy aktywny obszar ma sensowny opis w `alt`.
- Czy hotspoty są na tyle duże, by dało się je kliknąć palcem.
- Czy kolejność `` odpowiada temu, jak użytkownik widzi obraz.
- Czy obraz nie skaluje się szybciej niż koordynaty.
- Czy naprawdę nie da się tego prościej zrobić zwykłymi linkami lub SVG.
Jeżeli te pięć punktów przechodzi bez zgrzytu, mapa obrazu jest obroniona. W przeciwnym razie zwykle lepiej wrócić do prostszej nawigacji, bo frontend wygrywa nie wtedy, gdy da się zrobić więcej, tylko wtedy, gdy da się zrobić czytelniej.
