<area>: Das Image Map Area-Element
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.
Das <area>
HTML Element definiert einen Bereich innerhalb einer Bildkarte, die vordefinierte klickbare Bereiche besitzt. Eine Bildkarte ermöglicht es, geometrische Bereiche auf einem Bild mit Hyperlinks zu verbinden.
Dieses Element wird nur innerhalb eines <map>
Elements verwendet.
Probieren Sie es aus
Attribute
Zu den Attributen dieses Elements gehören die globalen Attribute.
alt
-
Eine alternative Textzeichenkette zur Anzeige in Browsern, die keine Bilder anzeigen. Der Text sollte so formuliert sein, dass er dem Benutzer die gleiche Art von Wahl bietet, wie es das Bild tut, wenn es ohne den alternativen Text angezeigt wird. Dieses Attribut ist nur erforderlich, wenn das
href
Attribut verwendet wird. coords
-
Das
coords
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 spezifiziert die Koordinaten der oberen linken und unteren rechten Ecke des Rechtecks. Zum Beispiel, in<area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla">
sind die Koordinaten0,0
und253,27
, die die oberen linken und unteren rechten Ecken des Rechtecks angeben. -
circle
: Der Wert istx,y,radius
. Der Wert spezifiziert die Koordinaten des Kreismittelpunkts und den Radius. Beispiel:<area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">
-
poly
: Der Wert istx1,y1,x2,y2,..,xn,yn
. Der Wert spezifiziert die Koordinaten der Ecken des Polygons. Wenn die ersten und letzten Koordinatenpaare nicht identisch sind, fügt der Browser das letzte Koordinatenpaar hinzu, um das Polygon zu schließen.
Die Werte sind Zahlen von CSS-Pixeln.
-
download
-
Dieses Attribut, falls vorhanden, zeigt an, dass der Autor beabsichtigt, die Verknüpfung zum Herunterladen einer Ressource zu verwenden. 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; falls ja, repräsentiert das
<area>
Element keinen Hyperlink. ping
-
Enthält eine durch Leerzeichen getrennte Liste von URLs, an die beim Verfolgen des Hyperlinks
POST
Anfragen mit dem BodyPING
vom Browser im Hintergrund gesendet werden. Typischerweise für Tracking verwendet. referrerpolicy
-
Ein String, der angibt, welcher Referrer beim Abrufen der Ressource verwendet werden soll:
no-referrer
: DerReferer
Header wird nicht gesendet.no-referrer-when-downgrade
: DerReferer
Header wird nicht an Ursprünge ohne TLS (HTTPS) gesendet.origin
: Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt: ihr Schema, Host und Port.origin-when-cross-origin
: Der an andere Ursprünge gesendete Referrer wird 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 gleichen Ursprung gesendet, aber Cross-Origin-Anfragen enthalten keine Referrer-Informationen.strict-origin
: Sendet nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), aber nicht an ein weniger sicheres Ziel (HTTPS→HTTP).strict-origin-when-cross-origin
(Standard): Sendet eine vollständige URL bei einer Anfrage mit gleichem Ursprung, sendet nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und sendet keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).-
unsafe-url
: Der Referrer wird den Ursprung und den Pfad enthalten (aber nicht das Fragment, das Passwort oder den Benutzernamen). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge leakt.
rel
-
Für Anker, die das
href
Attribut enthalten, gibt dieses Attribut das Verhältnis des Zielobjekts zum Verknüpfungsobjekt an. Der Wert ist eine durch Leerzeichen getrennte Liste von Linktypen. Die Werte und ihre Semantik werden von einer Behörde registriert, die für den Dokumentautor Bedeutung haben könnte. Das Standardverhältnis, wenn kein anderes angegeben ist, ist leer. Verwenden Sie dieses Attribut nur, wenn dashref
Attribut vorhanden ist. shape
-
Die Form des zugehörigen Hotspots. Die Spezifikationen für HTML definiert die Werte
rect
, die einen rechteckigen Bereich definieren;circle
, die einen kreisförmigen Bereich definieren;poly
, die ein Polygon definieren; unddefault
, die den gesamten Bereich über alle definierten Formen hinaus angeben. target
-
Ein Schlüsselwort oder vom Autor definierter Name des Browsing-Kontexts, in dem die verknüpfte Ressource angezeigt wird. Die folgenden Schlüsselwörter haben spezielle 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 der aktuellen Seite an, sofern die aktuelle Seite in einem Frame eingebettet ist. Wenn kein übergeordneter Kontext vorhanden ist, wirkt es gleich wie_self
. -
_top
: Zeigt die Ressource im obersten Browsing-Kontext (dem Browsing-Kontext, der ein Vorfahr der aktuellen ist und keinen übergeordneten Kontext hat) an. Wenn kein übergeordneter Kontext vorhanden ist, wirkt es gleich wie_self
.
Verwenden Sie dieses Attribut nur, wenn das
href
Attribut vorhanden ist.Hinweis: Wenn
target="_blank"
bei<area>
Elementen gesetzt wird, bietet es implizit das gleicherel
Verhalten wie das Setzen vonrel="noopener"
, daswindow.opener
nicht setzt. Siehe Browser-Kompatibilität für den Supportstatus.
Beispiele
<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 | Flow-Inhalte, phrasierte Inhalte. |
---|---|
Erlaubte Inhalte | Kein Inhalt; es ist ein leeres Element. |
Tag-Auslassung | Muss ein Start-Tag haben und darf keinen End-Tag haben. |
Erlaubte Eltern | Jedes Element, das phrasierte Inhalte akzeptiert. Das <area> Element muss einen Vorfahren <map> haben, nicht zwingend einen direkten Elternteil. |
Implizierte 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 Standard # the-area-element |
Browser-Kompatibilität
BCD tables only load in the browser