<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 Bilderkarte, der vordefinierte klickbare Bereiche hat. Eine Bilderkarte ermöglicht es, geometrische Bereiche eines Bildes mit Hypertext-Links zu verbinden.
Dieses Element wird nur innerhalb eines <map>
-Elements verwendet.
Probieren Sie es aus
Attribute
Die Attribute dieses Elements umfassen die globalen Attribute.
alt
-
Ein alternativer Textstring, der auf Browsern angezeigt wird, die keine Bilder anzeigen. Der Text sollte so formuliert sein, dass er dem Benutzer dieselbe Art von Wahlmöglichkeit bietet, wie das Bild ohne den alternativen Text bieten würde. Dieses Attribut ist nur erforderlich, wenn das
href
-Attribut verwendet wird. coords
-
Das
coords
-Attribut beschreibt die Koordinaten desshape
-Attributs im Hinblick auf 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="#" target="_blank" alt="Mozilla">
sind die Koordinaten0,0
und253,27
, die jeweils die obere linke und untere rechte Ecke des Rechtecks angeben. -
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="#" target="_blank" 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, fügt der Browser das letzte Koordinatenpaar hinzu, um das Polygon zu schließen.
Die Werte sind Zahlen von CSS-Pixeln.
-
download
-
Dieses Attribut zeigt an, wenn es vorhanden ist, 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 Hyperlinkziel für das Gebiet. 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 liste von durch Leerzeichen getrennten URLs, an die, wenn der Hyperlink gefolgt wird,
POST
-Anfragen mit dem KörperPING
vom Browser im Hintergrund gesendet werden. Typischerweise für Tracking-Zwecke verwendet. referrerpolicy
-
Ein Zeichenfolgenwert, 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 Referrer, der an andere Ursprünge gesendet wird, wird auf das Schema, den Host und den Port beschränkt. Bei Navigationen auf demselben Ursprung wird weiterhin der Pfad einbezogen.same-origin
: Ein Referrer wird für denselben Ursprung gesendet, aber bei Cross-Origin-Anfragen wird keine Referrer-Information enthalten sein.strict-origin
: Senden Sie nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsebenen-Protokoll gleich bleibt (HTTPS→HTTPS), aber senden Sie ihn nicht an ein weniger sicheres Ziel (HTTPS→HTTP).strict-origin-when-cross-origin
(Standardwert): Senden Sie eine vollständige URL bei einer Anfrage innerhalb des gleichen Ursprungs, senden Sie nur den Ursprung, wenn das Sicherheitsebenen-Protokoll gleich bleibt (HTTPS→HTTPS), und senden Sie keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).-
unsafe-url
: Der Referrer wird den Ursprung und den Pfad enthalten (aber nicht das Fragment, Passwort oder Benutzernamen). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge preisgibt.
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 Linktypen. Die Werte und ihre Semantik werden von einer Behörde registriert, die möglicherweise für den Dokumentautor Bedeutung hat. Die Standardbeziehung, wenn keine andere gegeben ist, ist leer. Verwenden Sie dieses Attribut nur, wenn dashref
-Attribut vorhanden ist. shape
-
Die Form des zugeordneten Hotspots. Die Spezifikationen für HTML definieren die Werte
rect
, die ein rechteckiges Gebiet definieren;circle
, die ein kreisförmiges Gebiet definieren;poly
, die ein Polygon definieren; unddefault
, die das gesamte Gebiet jenseits aller definierten Formen angeben. target
-
Ein Schlüsselwort oder ein vom Autor definierter Name des Browsing-Kontexts, in dem die verlinkte Ressource angezeigt werden soll. Die folgenden Schlüsselwörter haben spezielle Bedeutungen:
_self
(Standardwert): Zeige die Ressource im aktuellen Browsing-Kontext._blank
: Zeige die Ressource in einem neuen, unbenannten Browsing-Kontext.-
_parent
: Zeige die Ressource im übergeordneten Browsing-Kontext des aktuellen Kontexts, wenn die aktuelle Seite innerhalb eines Rahmens ist. Wenn kein übergeordneter Kontext vorhanden ist, verhält sich dieser wie_self
. -
_top
: Zeige die Ressource im obersten Browsing-Kontext (dem Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen übergeordneten Kontext hat). Wenn kein übergeordneter Kontext vorhanden ist, verhält sich dieser wie_self
.
Verwenden Sie dieses Attribut nur, wenn das
href
-Attribut vorhanden ist.Hinweis: Die Einstellung von
target="_blank"
auf<area>
-Elementen bietet implizit dasselberel
-Verhalten wie die Einstellung rel="noopener", daswindow.opener
nicht setzt. Siehe Browser-Kompatibilität für den Unterstützungsstatus.
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 | Fließinhalt, formulierender Inhalt. |
---|---|
Erlaubter Inhalt | None; es ist ein void element. |
Tag-Auslassung | Muss ein Start-Tag haben und darf keinen End-Tag haben. |
Erlaubte Eltern | Jedes Element, das formulierenden Inhalt akzeptiert. Das <area> -Element muss einen Vorfahren <map> haben, muss jedoch kein direkter Elternteil sein. |
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