HTML Element - map

Beispiel

<img src="images/sonnensystem.png" width="300" height="258" alt="Ausschnitt des Sonnensystems" usemap="#planetmap">

<map name="planetmap">
<area shape="circle" coords="96,148,11" href="images/merkur.png" target="_blank" alt="Merkur anzeigen">
<area shape="circle" coords="151,148,19" href="images/venus.png" target="_blank" alt="Venus anzeigen">
<area shape="circle" coords="215,147,22" href="images/erde.png" target="_blank" alt="Erde anzeigen">
<area shape="circle" coords="271,151,18" href="images/mars.png" target="_blank" alt="Mars anzeigen">
</map>

Das map-Element definiert eine Image-Map. Eine Image-Map ist ein Bild mit anklickbaren Bereichen.

Das erforderliche name-Attribut des map-Elements ist mit dem usemap-Attribut des img-Elements verknüpft und stellt eine Beziehung zwischen dem Bild und der Map her.

Das map-Element enthält mehrere area-Elemente, die die anklickbaren Bereiche der Image-Map definieren.

Attribute

Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.

Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.

Unterstützung von Global- und Event-Attributen

Das map-Tag unterstützt auch Global- und Event-Attribute.

Standardbrowser CSS

Webbrowser wenden auf viele Elemente vordefinierte CSS-Stile an, die eine grundlegende Struktur und Lesbarkeit sicherstellen. Umfang und Ausgestaltung dieser Standardstile können je nach Browser variieren, etwa in Bezug auf Abstände, Schriftgrößen oder die Darstellung einzelner Elemente.

map {
display: inline;
}

Browserunterstützung

Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.