<area>: Das Image-Map-Bereichselement

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.

* Some parts of this feature may have varying levels of support.

Das <area>-Element von HTML definiert einen Bereich innerhalb einer Bildkarte, die vordefinierte klickbare Bereiche hat. Eine Bildkarte ermöglicht es, geometrische Bereiche auf einem Bild mit Hypertext-Links zu verbinden.

Dieses Element wird nur innerhalb eines <map>-Elements verwendet.

Probieren Sie es aus

<map name="infographic">
  <area
    shape="poly"
    coords="129,0,260,95,129,138"
    href="https://developer.mozilla.org/docs/Web/HTTP"
    alt="HTTP" />
  <area
    shape="poly"
    coords="260,96,209,249,130,138"
    href="https://developer.mozilla.org/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="209,249,49,249,130,139"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    alt="JavaScript" />
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://developer.mozilla.org/docs/Web/API"
    alt="Web APIs" />
  <area
    shape="poly"
    coords="0,95,128,0,128,137"
    href="https://developer.mozilla.org/docs/Web/CSS"
    alt="CSS" />
</map>
<img
  usemap="#infographic"
  src="/shared-assets/images/examples/mdn-info.png"
  alt="MDN infographic" />
img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 260px;
}

Attribute

Die Attribute dieses Elements schließen die globalen Attribute ein.

alt

Ein Text-String, der als Alternative für Browser angezeigt wird, die keine Bilder darstellen. Der Text sollte so formuliert sein, dass er dem Benutzer dieselbe Wahl bietet, wie sie das Bild ohne den Alternativtext bieten würde. Dieses Attribut ist nur erforderlich, wenn das href-Attribut verwendet wird.

coords

Das coords-Attribut beschreibt die Koordinaten des shape-Attributs in Bezug auf Größe, Form und Platzierung eines <area>. Dieses Attribut darf nicht verwendet werden, wenn shape auf default gesetzt ist.

  • rect: der Wert ist x1,y1,x2,y2. Der Wert gibt die Koordinaten der oberen linken und unteren rechten Ecke des Rechtecks an. Zum Beispiel sind in <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> die Koordinaten 0,0 und 253,27, was die obere linke und untere rechte Ecke des Rechtecks bedeutet.
  • circle: der Wert ist x,y,Radius. Der Wert gibt die Koordinaten des Kreismittelpunkts und den Radius an. Zum Beispiel: <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">
  • poly: der Wert ist x1,y1,x2,y2,..,xn,yn. Der Wert gibt die Koordinaten der Ränder des Polygons an. Wenn das erste und das letzte Koordinatenpaar nicht identisch sind, fügt der Browser das letzte Koordinatenpaar hinzu, um das Polygon zu schließen.

Die Werte sind Zahlen in CSS-Pixeln.

download

Dieses Attribut zeigt, falls vorhanden, an, dass die verknüpfte Ressource heruntergeladen werden soll, anstatt im Browser angezeigt zu werden. Siehe <a> für eine vollständige Beschreibung des download-Attributs.

href

Das Hyperlink-Ziel für den Bereich. Sein Wert ist eine gültige URL. Dieses Attribut kann ausgelassen werden; in diesem Fall stellt das <area>-Element keinen Hyperlink dar.

ping

Enthält eine durch Leerzeichen getrennte Liste von URLs, an die, wenn der Hyperlink gefolgt wird, POST-Anfragen mit dem Inhalt PING vom Browser (im Hintergrund) gesendet werden. Typischerweise für Tracking verwendet.

referrerpolicy

Ein String, der angibt, welchen Referrer beim Abrufen der Ressource verwendet werden soll:

  • no-referrer: Der Referer-Header wird nicht gesendet.
  • no-referrer-when-downgrade: Der Referer-Header wird nicht an Origins ohne TLS (HTTPS) gesendet.
  • origin: Der gesendete Referrer wird auf den Origin der verweisenden Seite beschränkt: ihr Schema, Host und Port.
  • origin-when-cross-origin: Der Referrer, der an andere Origins gesendet wird, ist auf das Schema, den Host und den Port beschränkt. Navigationen am selben Origin beinhalten weiterhin den Pfad.
  • same-origin: Ein Referrer wird für same origin gesendet, aber Anfragen über Origin-Grenzen hinweg enthalten keine Referrer-Informationen.
  • strict-origin: Nur der Origin des Dokuments wird als Referrer gesendet, wenn das Protokollsicherheitslevel gleich bleibt (HTTPS→HTTPS), aber nicht an ein weniger sicheres Ziel gesendet wird (HTTPS→HTTP).
  • strict-origin-when-cross-origin (Standard): Sendet eine vollständige URL bei einer Same-Origin-Anfrage, sendet nur den Origin, wenn das Protokollsicherheitslevel gleich bleibt (HTTPS→HTTPS), und sendet keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).
  • unsafe-url: Der Referrer enthält Origin und Pfad (aber nicht das Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, da er Origins und Pfade von TLS-geschützten Ressourcen an unsichere Origins leakt.
rel

Für Anker, die das href-Attribut enthalten, gibt dieses Attribut die Beziehung des Zielobjekts zum Linkobjekt an. Der Wert ist eine durch Leerzeichen getrennte Liste von Linktypen. Die Werte und deren Semantik werden von einer Autorität registriert, die dem Dokumentenautor Bedeutung verleihen könnte. Die standardmäßige Beziehung, falls keine andere angegeben ist, ist leer. Verwenden Sie dieses Attribut nur, wenn das href-Attribut vorhanden ist.

shape

Die Form des zugehörigen Hotspots. Die HTML-Spezifikationen definieren die Werte rect, die einen rechteckigen Bereich definieren; circle, die einen kreisförmigen Bereich definieren; poly, die ein Polygon definieren; und default, was den gesamten Bereich jenseits aller definierten Formen angibt.

target

Ein Schlüsselwort oder vom Autor definierter Name des Browsing-Kontexts, in dem die verknüpfte Ressource angezeigt werden soll. Die folgenden Schlüsselwörter haben besondere Bedeutungen:

  • _self (Standard): Zeigt die Ressource im aktuellen Browsing-Kontext an.
  • _blank: Zeigt die Ressource in einem neuen, unbenannten Browsing-Kontext an.
  • _parent: Zeigt die Ressource im Eltern-Browsing-Kontext des aktuellen an, falls die aktuelle Seite in einem Frame ist. Wenn es keinen Eltern gibt, verhält es sich wie _self.
  • _top: Zeigt die Ressource im obersten Browsing-Kontext an (der Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen Eltern hat). Wenn es keinen Eltern gibt, verhält es sich wie _self.

Verwenden Sie dieses Attribut nur, wenn das href-Attribut vorhanden ist.

Hinweis: Das Setzen von target="_blank" auf <area>-Elementen bietet implizit dasselbe rel-Verhalten wie das Setzen von rel="noopener", was window.opener nicht setzt. Siehe Browser-Kompatibilität für den Unterstützungsstatus.

Beispiele

html
<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="left.html"
    alt="Click to go Left" />
  <area
    shape="circle"
    coords="275,75,75"
    href="right.html"
    alt="Click to go Right" />
</map>
<img
  usemap="#primary"
  src="https://dummyimage.com/350x150"
  alt="350 x 150 pic" />

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Fließinhalte, ausgezeichnete Inhalte.
Zulässiger Inhalt Keiner; es ist ein leeres Element.
Tag-Auslassung Muss einen Start-Tag haben und darf keinen End-Tag haben.
Zulässige Eltern Jedes Element, das ausgezeichnete Inhalte akzeptiert. Das <area>-Element muss einen Vorfahren <map> haben, muss jedoch nicht ein direkter Elternteil sein.
Implizite ARIA-Rolle link, wenn das href-Attribut vorhanden ist, andernfalls generic
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLAreaElement`](/de/docs/Web/API/HTMLAreaElement)

Spezifikationen

Specification
HTML
# the-area-element

Browser-Kompatibilität