<area>: Das Bildkartenbereichselement
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, der vordefinierte klickbare Bereiche hat. Eine Bildkarte ermöglicht es, geometrische Bereiche in einem Bild mit Hypertext-Links zu verknüpfen.
Dieses Element wird nur innerhalb eines <map>
-Elements verwendet.
Probieren Sie es aus
Attribute
Die Attribute dieses Elements umfassen die globalen Attribute.
alt
-
Ein Textstring-Alternative zur Anzeige in Browsern, die keine Bilder anzeigen können. Der Text sollte so formuliert sein, dass er dem Benutzer die gleiche Wahl präsentiert, wie es das Bild ohne den Alternativtext tun würde. Dieses Attribut ist nur erforderlich, wenn das
href
-Attribut verwendet wird. coords
-
Das
coords
-Attribut beschreibt die Koordinaten desshape
-Attributs in Bezug 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 das erste und letzte Koordinatenpaar nicht gleich 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, wenn vorhanden, zeigt an, dass die verknüpfte Ressource heruntergeladen werden soll, anstatt im Browser angezeigt zu werden. Siehe
<a>
für eine vollständige Beschreibung desdownload
-Attributs. href
-
Das Hyperlink-Ziel für den Bereich. Sein Wert ist eine gültige URL. Dieses Attribut kann weggelassen werden; wenn ja, repräsentiert das
<area>
-Element keinen Hyperlink. ping
-
Enthält eine durch Leerzeichen getrennte Liste von URLs, an die bei Verfolgung des Hyperlinks
POST
-Anfragen mit dem KörperPING
vom Browser (im Hintergrund) gesendet werden. Wird typischerweise für das 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 origins ohne TLS (HTTPS) gesendet.origin
: Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt: sein 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. Navigierungen im gleichen Ursprung enthalten weiterhin den Pfad.same-origin
: Ein Referrer wird für gleicher Ursprung gesendet, aber keine Informationen über den Referrer bei Ursprungs übergreifenden Anfragen.strict-origin
: Es wird nur der Ursprung des Dokuments als Referrer gesendet, wenn die Sicherheitsebene 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 im gleichen Ursprung, sendet nur den Ursprung, wenn die Sicherheitsebene des Protokolls gleich bleibt (HTTPS→HTTPS), und sendet keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).unsafe-url
: Der Referrer enthält den Ursprung und den Pfad (aber nicht das Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge offenlegt.
rel
-
Für Anker, die das
href
-Attribut enthalten, gibt dieses Attribut das Verhältnis des Zielobjekts zum Linkobjekt an. Der Wert ist eine durch Leerzeichen getrennte Liste von Linktypen. Die Werte und ihre Semantiken werden von einer Autorität registriert, die möglicherweise Bedeutung für den Dokumentautoren hat. Der Standardwert für die Beziehung, wenn kein anderer 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 definieren die Werte
rect
, die eine rechteckige Region definieren;circle
, die eine kreisförmige Region definieren;poly
, die ein Polygon definieren; unddefault
, die die gesamte Region außerhalb der definierten Formen angeben. target
-
Ein Schlüsselwort oder durch den Autor definierter Name des Browsing-Kontexts, in dem die verknüpfte Ressource angezeigt werden soll. 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 des aktuellen an, wenn die aktuelle Seite innerhalb eines Rahmens ist. Wenn kein übergeordneter Kontext vorhanden ist, verhält sich das gleiche wie_self
._top
: Zeigt die Ressource im obersten Browsing-Kontext an (dem Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen übergeordneten hat). Wenn kein übergeordneter Kontext vorhanden ist, verhält sich das gleiche wie_self
.
Verwenden Sie dieses Attribut nur, wenn das
href
-Attribut vorhanden ist.Hinweis: Das Setzen von
target="_blank"
auf<area>
-Elemente impliziert das gleicherel
Verhalten wie das Setzen vonrel="noopener"
, welcheswindow.opener
nicht setzt. Sehen Sie die 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 | Flow-Inhalt, Phraseninhalt. |
---|---|
Zulässiger Inhalt | Keiner; es ist ein Void-Element. |
Tag-Auslassung | Muss ein Start-Tag haben und darf keinen End-Tag haben. |
Zulässige Eltern |
Jedes Element, das Phraseninhalt akzeptiert. Das <area> -Element muss einen Vorfahren <map> haben, muss aber kein direkter Elternteil sein.
|
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 Standard # the-area-element |
Browser-Kompatibilität
BCD tables only load in the browser