Mapa obrazu pozwala utworzyć klikalne obszary na jednym obrazku. Każdy obszar może prowadzić do innego adresu URL. W HTML realizuje się to za pomocą elementów <map> i <area> oraz atrybutu usemap w znaczniku <img>.
Podstawowa składnia
<img src="plan.png" alt="Plan firmy" usemap="#mapaFirmy">
<map name="mapaFirmy">
<area shape="circle" coords="50,50,40" href="http://www.firma.pl" alt="firma">
</map>
Atrybut usemap="#mapaFirmy" wskazuje, że obraz korzysta z mapy o nazwie mapaFirmy. W elemencie <map> umieszcza się elementy <area>, które definiują konkretne aktywne pola.
Element <area>
Najważniejsze atrybuty elementu <area> to:
shape– kształt obszaru aktywnego,coords– współrzędne obszaru,href– adres, do którego prowadzi kliknięcie,alt– opis alternatywny wymagany, gdy obszar jest linkiem.
Kształty obszarów
Wartość shape może przyjmować m.in.:
rect– prostokąt,circle– koło,poly– wielokąt.
Dla koła zapis współrzędnych wygląda tak:
coords="x,y,r"
gdzie x i y oznaczają środek koła, a r jego promień. Przykład coords="50,50,40" oznacza koło o środku w punkcie (50, 50) i promieniu 40 pikseli.
Ważne na egzaminie
Poprawny kołowy obszar aktywny w HTML5 powinien mieć shape="circle", poprawny adres w cudzysłowie oraz atrybut alt, np.:
<area shape="circle" coords="50,50,40" href="http://www.firma.pl" alt="firma">