<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 desname
-Attributs darf nicht gleich dem Wert desname
-Attributs eines anderen<map>
-Elements im selben Dokument sein. Wenn dasid
-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
<!-- 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 Standard # the-map-element |
Browser-Kompatibilität
BCD tables only load in the browser