<map> HTML Bildkarten-Element
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das <map> HTML-Element wird zusammen mit <area>-Elementen verwendet, um eine Bildkarte (einen anklickbaren Linkbereich) zu definieren.
Probieren Sie es aus
<map name="infographic">
<area
shape="poly"
coords="130,147,200,107,254,219,130,228"
href="https://developer.mozilla.org/docs/Web/HTML"
alt="HTML" />
<area
shape="poly"
coords="130,147,130,228,6,219,59,107"
href="https://developer.mozilla.org/docs/Web/CSS"
alt="CSS" />
<area
shape="poly"
coords="130,147,200,107,130,4,59,107"
href="https://developer.mozilla.org/docs/Web/JavaScript"
alt="JavaScript" />
</map>
<img
usemap="#infographic"
src="/shared-assets/images/examples/mdn-info2.png"
alt="MDN infographic" />
img {
display: block;
margin: 0 auto;
width: 260px;
height: 232px;
}
Attribute
Dieses Element enthält die globalen Attribute.
name-
Das
name-Attribut gibt der Karte einen Namen, sodass sie referenziert werden kann. Das Attribut muss vorhanden sein und einen nicht-leeren Wert ohne Leerzeichen haben. Der Wert desname-Attributs darf nicht dem Wert desname-Attributs eines anderen<map>-Elements im selben Dokument entsprechen. Wenn dasid-Attribut ebenfalls angegeben ist, müssen beide Attribute denselben Wert haben.
Beispiele
Bildkarte 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 | Fließender Inhalt, Satzinhalt, 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 Satzinhalt akzeptiert. |
| Implizite ARIA-Rolle | Keine entsprechende Rolle |
| Erlaubte ARIA-Rollen | Keine role erlaubt |
| DOM-Schnittstelle | [`HTMLMapElement`](/de/docs/Web/API/HTMLMapElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-map-element |