<area>: Das Bildkartenbereich-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.
* Some parts of this feature may have varying levels of support.
Das <area>
HTML-Element definiert einen Bereich innerhalb einer Bildkarte, der vordefinierte anklickbare Bereiche enthält. Eine Bildkarte ermöglicht es, geometrische Bereiche auf einem Bild mit Hypertext-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 die globalen Attribute.
alt
-
Eine Textalternative, die in Browsern angezeigt wird, die keine Bilder anzeigen. Der Text sollte so formuliert sein, dass er dem Benutzer dieselbe Wahlmöglichkeit bietet wie das Bild, wenn es ohne den Alternativtext angezeigt würde. Dieses Attribut ist nur erforderlich, wenn das
href
-Attribut verwendet wird. coords
-
Das
coords
-Attribut beschreibt die Koordinaten desshape
-Attributs hinsichtlich 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 die obere linke und die untere rechte Ecke des Rechtecks angeben.circle
: der Wert istx,y,Radius
. Der Wert gibt die Koordinaten des Kreiszentrums 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 Kanten 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 in CSS-Pixeln.
download
-
Dieses Attribut, falls vorhanden, zeigt 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 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 beim Folgen des Hyperlinks
POST
-Anfragen mit dem BodyPING
im Hintergrund vom Browser gesendet werden. Typischerweise verwendet für Tracking-Zwecke. referrerpolicy
-
Ein String, der anzeigt, welcher Referrer beim Abrufen der Ressource verwendet wird:
no-referrer
: DerReferer
-Header wird nicht gesendet.no-referrer-when-downgrade
: DerReferer
-Header wird nicht an Herkünfte ohne TLS (HTTPS) gesendet.origin
: Der gesendete Referrer wird auf die Herkunft der verweisenden Seite beschränkt: ihr Schema, Host, und Port.origin-when-cross-origin
: Der Referrer, der an andere Herkünfte gesendet wird, wird auf das Schema, den Host und den Port beschränkt. Navigationen auf derselben Herkunft enthalten weiterhin den Pfad.same-origin
: Ein Referrer wird für gleiche Herkunft gesendet, aber Cross-Origin-Anfragen enthalten keine Referrer-Informationen.strict-origin
: Nur die Herkunft des Dokuments als Referrer senden, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), aber nicht an ein weniger sicheres Ziel senden (HTTPS→HTTP).strict-origin-when-cross-origin
(Standard): Eine vollständige URL senden, wenn eine Anfrage an die gleiche Herkunft ausgeführt wird, nur die Herkunft senden, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und keinen Header an ein weniger sicheres Ziel senden (HTTPS→HTTP).unsafe-url
: Der Referrer enthält die Herkunft und den Pfad (aber nicht das Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, da er Herkünfte und Pfade von TLS-geschützten Ressourcen an unsichere Herkünfte preisgibt.
rel
-
Für Anker, die das
href
-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 Bedeutung werden von einer Behörde festgelegt, die für den Dokumentautor relevant sein könnte. Die Standardbeziehung, wenn keine andere angegeben 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 einen rechteckigen Bereich definieren;circle
, die einen kreisförmigen Bereich definieren;poly
, die ein Polygon definieren; unddefault
, die den gesamten Bereich jenseits der definierten Formen angeben. target
-
Ein Schlüsselwort oder ein vom Autor definierter Name des Browsing-Kontexts, um die verlinkte Ressource anzuzeigen. 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, nicht benannten Browsing-Kontext an._parent
: Zeigt die Ressource im übergeordneten Browsing-Kontext des aktuellen an, wenn die aktuelle Seite innerhalb eines Rahmens ist. Wenn es keinen übergeordneten gibt, verhält sich wie_self
._top
: Zeigt die Ressource im obersten Browsing-Kontext an (der Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen übergeordneten Kontext hat). Wenn es keinen übergeordneten gibt, verhält sich wie_self
.
Verwenden Sie dieses Attribut nur, wenn das
href
-Attribut vorhanden ist.Hinweis: Die Einstellung
target="_blank"
auf<area>
-Elementen bietet implizit das gleicherel
-Verhalten wie die Einstellung vonrel="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ßender Inhalt, formulierungsmäßiger Inhalt. |
---|---|
Erlaubte Inhalte | Keine; es ist ein Leerelement. |
Tag-Auslassung | Muss einen Start-Tag haben und darf keinen End-Tag haben. |
Erlaubte Eltern |
Jedes Element, das formulierungsmäßigen Inhalt akzeptiert. Das <area> -Element muss einen Vorfahren <map> haben, dieser muss jedoch kein direkter Elternteil sein.
|
Implizite 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 # the-area-element |
Browser-Kompatibilität
BCD tables only load in the browser