<map>: Das Image Map-Element
Das <map> HTML Element wird in Verbindung mit <area> Elementen verwendet, um eine Image Map (einen klickbaren 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 beinhaltet die globalen Attribute.
name-
Das
name-Attribut gibt der Map einen Namen, sodass sie referenziert werden kann. Das Attribut muss vorhanden sein und einen nicht-leeren Wert ohne Leerzeichen enthalten. Der Wert desname-Attributs darf nicht gleich dem Wert desname-Attributs eines anderen<map>-Elementes im selben Dokument sein. Wenn dasid-Attribut auch 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, wahrnehmbarer Inhalt. |
|---|---|
| Erlaubter Inhalt | Jedes transparente Element. |
| Tag-Weglassung | Keine, sowohl das Start- als auch das End-Tag sind verpflichtend. |
| 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) |