Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
<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 Juli 2015.
Das<map>HTML Element wird zusammen mit<area>-Elementen verwendet, um eine Image-Map (eine anklickbare Link-Fläche) 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 dieglobalen Attribute.
nameDas
name-Attribut gibt der Karte 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>-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 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" alt="JavaScript" /> <area shape="circle" coords="275,75,75" href="https://developer.mozilla.org/docs/Web/CSS" alt="CSS" /></map><img usemap="#primary" src="parrots.jpg" alt="350 x 150 picture of two parrots" />Ergebnis
Technische Zusammenfassung
| Inhaltskategorien | Fließender Inhalt,Formulierender Inhalt, greifbarer Inhalt. |
|---|---|
| Erlaubter Inhalt | Jedestransparentes Element. |
| Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
| Erlaubte Eltern | Jedes Element, dasformulierenden Inhalt akzeptiert. |
| Implizite ARIA-Rolle | Keine entsprechende Rolle |
| Erlaubte ARIA-Rollen | Keinerole erlaubt |
| DOM-Schnittstelle | [`HTMLMapElement`](/de/docs/Web/API/HTMLMapElement) |
Spezifikationen
| Specification |
|---|
| HTML # the-map-element |