<map>: Das Image Map-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <map> HTML-Element wird mit <area>-Elementen verwendet, um eine Image Map (ein klickbarer Linkbereich) zu definieren.

Probieren Sie es aus

Attribute

Dieses Element umfasst die globalen Attribute.

name

Das name-Attribut gibt der Karte einen Namen, damit sie referenziert werden kann. Das Attribut muss vorhanden sein und einen nicht-leeren Wert ohne Leerzeichen haben. Der Wert des name-Attributs darf nicht gleich dem Wert des name-Attributs eines anderen <map>-Elements im selben Dokument sein. Wenn das id-Attribut ebenfalls angegeben ist, müssen beide Attribute denselben Wert haben.

Beispiele

Image Map mit zwei Bereichen

Klicken Sie auf den linken Papagei für JavaScript oder auf den rechten Papagei für CSS.

HTML

html
<!-- Photo by Juliana e Mariana Amorim on Unsplash -->
<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript" />
  <area
    shape="circle"
    coords="275,75,75"
    href="https://developer.mozilla.org/docs/Web/CSS"
    target="_blank"
    alt="CSS" />
</map>
<img
  usemap="#primary"
  src="parrots.jpg"
  alt="350 x 150 picture of two parrots" />

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Phraseninhalt, greifbarer Inhalt.
Erlaubter Inhalt Jedes transparentes Element.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Phraseninhalt akzeptiert.
Implizierte ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLMapElement`](/de/docs/Web/API/HTMLMapElement)

Spezifikationen

Specification
HTML
# the-map-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch