<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.

In diesem Artikel

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 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, 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

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 Erlaubter Inhalt Tag-Auslassung Erlaubte Eltern Implizite ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Fließender Inhalt, Satzinhalt, greifbarer Inhalt.

Jedes transparentes Element.

Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.

Jedes Element, das Satzinhalt akzeptiert.

Keine entsprechende Rolle

Keine role erlaubt

[`HTMLMapElement`](/de/docs/Web/API/HTMLMapElement)

<a>
<area>

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden