Das<area>HTML Element definiert einen Bereich innerhalb einer Bildkarte, der vordefinierte klickbare Bereiche besitzt. EineBildkarte ermöglicht es, geometrische Bereiche auf einem Bild mitHypertext-Links 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 umfassen dieglobalen Attribute.

alt

Ein Textstring als Alternative, der in Browsern angezeigt wird, die keine Bilder anzeigen.Der Text sollte so formuliert sein, dass er dem Benutzer dieselbe Art von Wahl bietet, wie das Bild es ohne den Alternativtext tun würde.Dieses Attribut ist nur erforderlich, wenn dashref Attribut verwendet wird.

coords

Dascoords Attribut beschreibt die Koordinaten desshape Attributs in Größe, Form und Platzierung eines<area>.Dieses Attribut darf nicht verwendet werden, wennshape aufdefault gesetzt ist.

• rect: der Wert istx1,y1,x2,y2.Der Wert gibt die Koordinaten der oberen linken und unteren rechten Ecke des Rechtecks an.Zum Beispiel, in<area shape="rect" coords="0,0,253,27" href="#" alt="Mozilla"> sind die Koordinaten0,0 und253,27, was die obere linke und die untere rechte Ecke des Rechtecks angibt.
• circle: der Wert istx,y,radius. Der Wert gibt die Koordinaten des Kreismittelpunkts und den Radius an.Zum Beispiel:<area shape="circle" coords="130,136,60" href="#" alt="MDN">
• poly: der Wert istx1,y1,x2,y2,..,xn,yn. Der Wert gibt die Koordinaten der Ecken des Polygons an.Wenn die ersten und letzten Koordinatenpaare nicht identisch sind, wird der Browser das letzte Koordinatenpaar hinzufügen, um das Polygon zu schließen.

Die Werte sind Zahlen in CSS-Pixeln. UnserFormgenerator kann Ihnen helfen, diecoords-Syntax zu generieren, indem Sie Punkte auf einem Bild auswählen, das Sie hochladen.

download

Dieses Attribut, falls vorhanden, gibt an, dass die verlinkte Ressource heruntergeladen werden soll, anstatt im Browser angezeigt zu werden.Siehe<a> für eine vollständige Beschreibung desdownload Attributs.

href

Das Ziel des Hyperlinks für den Bereich.Sein Wert ist eine gültige URL.Dieses Attribut kann weggelassen werden; dann stellt das<area>-Element keinen Hyperlink dar.

ping

Enthält eine durch Leerzeichen getrennte Liste von URLs, an die, wenn der Hyperlink aufgerufen wird,POST Anfragen mit dem KörperPING vom Browser (im Hintergrund) gesendet werden.Wird typischerweise für Tracking verwendet.

referrerpolicy

Ein String, der angibt, welcher Referer beim Abrufen der Ressource verwendet werden soll:

• no-referrer: DerReferer-Header wird nicht gesendet.
• no-referrer-when-downgrade: DerReferer-Header wird nicht anorigins ohneTLS (HTTPS) gesendet.
• origin: Der gesendete Referer wird auf den Ursprung der verweisenden Seite beschränkt: ihrescheme,host, undport.
• origin-when-cross-origin: Der an andere Ursprünge gesendete Referer wird auf das Schema, den Host und den Port beschränkt. Navigationen im gleichen Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referer wird fürsame origin gesendet, aber Cross-Origin-Anfragen enthalten keine Referer-Informationen.
• strict-origin: Sendet nur den Ursprung des Dokuments als Referer, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), sendet ihn jedoch nicht an einen weniger sicheren Ort (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Sendet eine vollständige URL bei einer gleichartigen Ursprungsanfrage, sendet nur den Ursprung, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), und sendet keinen Header an eine weniger sichere Destination (HTTPS→HTTP).
• unsafe-url: Der Referer enthält den Ursprungund den Pfad (aber nicht dasfragment, daspassword, oder denusername).Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge preisgibt.

rel

Für Anker, die dashref 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 ihre Bedeutungen werden von irgendeiner Autorität registriert, die für den Dokumentautor von Bedeutung sein könnte.Die Standardbeziehung ist leer, wenn keine andere angegeben ist. Verwenden Sie dieses Attribut nur, wenn dashref Attribut vorhanden ist.

shape

Die Form des zugehörigen Hotspots. Die Spezifikationen für HTML definieren die Werterect, die eine rechteckige Region definiert;circle, die eine kreisförmige Region definiert;poly, die ein Polygon definiert; unddefault, die den gesamten Bereich jenseits jeglicher definierten Formen angibt.

target

Ein Schlüsselwort oder ein vom Autor definierter Name desbrowsing context, in dem die verlinkte 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 übergeordneten Browsing-Kontext des aktuellen Kontexts an, falls die aktuelle Seite in einem Frame ist.Falls es keinen Eltern gibt, verhält es sich genauso wie_self.
• _top: Zeigt die Ressource im obersten Browsing-Kontext an (der Browsing-Kontext, der ein Vorfahr des aktuellen ist und keinen Eltern hat).Falls es keinen Eltern gibt, verhält es sich genauso wie_self.

Verwenden Sie dieses Attribut nur, wenn dashref Attribut vorhanden ist.

Hinweis:Das Setzen vontarget="_blank" auf<area>-Elementen bietet implizit dasselberel-Verhalten wie das Setzen vonrel="noopener", daswindow.opener nicht setzt. SieheBrowser-Kompatibilität für den Unterstützungsstatus.

Beispiele

Bild mit klickbaren Bereichen

<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" />

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität