<map>
Mapa odnośników dla obrazu: klikalne obszary zdefiniowane elementami `<area>`.
- Wyświetlanie
- inline
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przezroczysta, zwykle elementy
<area>
Przykład
#<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="#paths"
>
<map name="paths">
<area shape="rect" coords="0,0,180,240" href="/dokumentacja/python" alt="Dokumentacja Pythona: analiza danych">
<area shape="rect" coords="180,0,360,240" href="/dokumentacja/javascript" alt="Dokumentacja JavaScriptu: tworzenie stron">
</map>Lewa połowa obrazu prowadzi do dokumentacji Pythona, a prawa do dokumentacji JavaScriptu. Najedź kursorem albo przejdź po obszarach klawiszem Tab.
Definicja i zastosowanie
#Element <map> razem z elementami <area> tworzy mapę obrazu (ang. image map), czyli obraz, w którym różne fragmenty prowadzą pod różne adresy. Mapę łączysz z obrazem przez atrybut usemap elementu <img>, podając nazwę mapy poprzedzoną znakiem #.
Każdy klikalny fragment opisuje <area>: jego kształt, współrzędne, adres i tekst alternatywny. Obszary są niewidoczne, ale da się je wybrać klawiszem Tab, a czytniki ekranu odczytują je jak zwykłe linki.
Mapy obrazów pochodzą z wczesnych lat sieci i mają poważną wadę: współrzędne podaje się w pikselach, więc obszary nie skalują się razem z obrazem w responsywnym układzie. Dziś podobny efekt częściej osiąga się, nakładając na obraz linki pozycjonowane w CSS albo rysując klikalne kształty w <svg>.
Składnia
#<img src="…" alt="…" usemap="#nazwa">
<map name="nazwa">
<area shape="rect" coords="…" href="…" alt="…">
</map>Atrybuty
#name
tekst (wymagany)
Nazwa mapy, do której odwołuje się atrybutusemap="#nazwa"obrazu. Nie może zawierać spacji, a jeśli element ma teżid, obie wartości muszą być identyczne.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
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
#- Każdy
<area>z adresem musi miećalt. Bez niego czytnik ekranu nie ma jak nazwać obszaru. - Jeśli obraz zmienia rozmiar na różnych ekranach, obszary mapy się rozjadą. W takim przypadku lepiej sprawdzą się linki nałożone w CSS albo
<svg>.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.