<area>: Das Bereichselement der Bildkarte

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>-HTML-Element definiert einen Bereich innerhalb einer Bildkarte, der vordefinierte klickbare Bereiche hat. Eine Bildkarte erlaubt es, geometrische Bereiche eines Bildes mit Hyperlinks zu verknüpfen.

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

Eine alternative Textzeichenkette, die in Browsern angezeigt wird, die keine Bilder darstellen. Der Text sollte so formuliert sein, dass er dem Benutzer dieselbe Art von Auswahl bietet wie das Bild selbst, wenn es ohne den Alternativtext angezeigt würde. Dieses Attribut ist nur erforderlich, wenn das href-Attribut verwendet wird.

coords

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

  • rect: der Wert ist x1,y1,x2,y2. Der Wert spezifiziert die Koordinaten der oberen linken und unteren rechten Ecke des Rechtecks. Beispielsweise in <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> sind die Koordinaten 0,0 und 253,27, was die obere linke und untere rechte Ecke des Rechtecks darstellt.
  • circle: der Wert ist x,y,radius. Der Wert spezifiziert die Koordinaten des Kreismittelpunkts und den Radius. 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 spezifiziert die Koordinaten der Kanten des Polygons. Wenn das erste und das letzte Koordinatenpaar nicht identisch sind, fügt der Browser automatisch 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 verlinkte Ressource heruntergeladen und nicht im Browser angezeigt werden soll. 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 weggelassen werden; In diesem Fall stellt das <area>-Element keinen Hyperlink dar.

ping

Enthält eine durch Leerzeichen getrennte Liste von URLs, an die POST-Anfragen mit dem Körper PING gesendet werden, wenn der Hyperlink gefolgt wird (im Hintergrund). Typischerweise für das 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 Ursprünge ohne TLS (HTTPS) gesendet.
  • origin: Der gesendete Referrer ist auf den Ursprung der verweisenden Seite beschränkt: ihr Schema, Host und Port.
  • origin-when-cross-origin: Der gesendete Referrer zu anderen Ursprüngen ist auf das Schema, den Host und den Port beschränkt. Navigationen im gleichen Ursprung beinhalten weiterhin den Pfad.
  • same-origin: Ein Referrer wird für den gleichen Ursprung gesendet, aber bei Anfragen an andere Ursprünge wird keine Referrer-Information enthalten sein.
  • strict-origin: Senden Sie nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), aber senden Sie ihn nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
  • strict-origin-when-cross-origin (Standard): Senden Sie eine vollständige URL bei einer selben Ursprungsanfrage, senden Sie nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und senden Sie keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).
  • unsafe-url: Der Referrer beinhaltet den Ursprung und den Pfad (jedoch nicht das Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, weil er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge weitergibt.
rel

Für Anker mit dem href-Attribut gibt dieses Attribut die Beziehung des Zielobjekts zum Linkobjekt an. Der Wert ist eine durch Leerzeichen getrennte Liste von Link-Typen. Die Werte und ihre Semantiken werden von einer Behörde registriert, die für den Dokumentautor eine Bedeutung haben könnte. Die Standardbeziehung, 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, die den gesamten Bereich jenseits der definierten Formen angeben.

target

Ein Stichwort oder ein vom Autor definierter Name des Browsing-Kontextes, um die verlinkte Ressource anzuzeigen. Die folgenden Stichwörter haben spezielle Bedeutungen:

  • _self (Standard): Zeigen Sie die Ressource im aktuellen Browsing-Kontext.
  • _blank: Zeigen Sie die Ressource in einem neuen, unbenannten Browsing-Kontext.
  • _parent: Zeigen Sie die Ressource im übergeordneten Browsing-Kontext des aktuellen an, falls die aktuelle Seite in einen Rahmen eingebettet ist. Wenn kein Übergeordneter vorhanden ist, verhält sich dies wie _self.
  • _top: Zeigen Sie die Ressource im obersten Browsing-Kontext an (der Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen übergeordneten Kontext hat). Wenn kein Übergeordneter vorhanden ist, verhält sich dies wie _self.

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

Hinweis:>target="_blank" an <area>-Elementen impliziert dasselbe rel Verhalten wie das Setzen von rel="noopener", das window.opener nicht festlegt. 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ßender Inhalt, in Phrasen gegliederter Inhalt.
Zugelassener Inhalt Keiner; es ist ein void element.
Tag-Auslassung Muss ein Start-Tag haben und darf kein End-Tag haben.
Zulässige Eltern Jedes Element, das in Phrasen gegliederten Inhalt akzeptiert. Das <area>-Element muss einen Vorfahren <map> haben, muss aber nicht direkt darüber liegen.
Implizierte ARIA-Rolle link, wenn das href-Attribut vorhanden ist, andernfalls generic
Zulässige ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLAreaElement`](/de/docs/Web/API/HTMLAreaElement)

Spezifikationen

Specification
HTML
# the-area-element

Browser-Kompatibilität

BCD tables only load in the browser