<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 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="https://developer.mozilla.org/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 Karte einen Namen, sodass sie referenziert werden kann. Das Attribut muss vorhanden sein und einen nicht-leeren Wert ohne Leerzeichen enthalten. 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 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	Fließender Inhalt, Formulierender Inhalt, 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 formulierenden Inhalt akzeptiert.
Implizite 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