`<map>` HTML Bildkarten-Element

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

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 enthlt 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 des name-Attributs darf nicht dem Wert des name-Attributs eines anderen <map>-Elements im selben Dokument entsprechen. Wenn das id-Attribut ebenfalls angegeben ist, mssen beide Attribute denselben Wert haben.

Beispiele

Bildkarte mit zwei Bereichen

Klicken Sie auf den linken Papagei fr JavaScript oder auf den rechten Papagei fr 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	Flieender 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

Browser-Kompatibilitt

Siehe auch

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden

<map> HTML Bildkarten-Element

In diesem Artikel

HTML

Ergebnis

Help improve MDN

`<map>` HTML Bildkarten-Element