<area>: Das Bereichselement der Bildkarte
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 klickbare Bereiche hat. Eine Bildkarte erlaubt es, geometrische Bereiche eines Bildes mit Hyperlinks 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 schließen die globalen Attribute ein.
alt
-
Eine alternative Textzeichenkette, die in Browsern angezeigt wird, die keine Bilder darstellen. Der Text sollte so formuliert sein, dass er dem Benutzer dieselbe Art von Auswahl bietet wie das Bild selbst, wenn es ohne den Alternativtext angezeigt würde. Dieses Attribut ist nur erforderlich, wenn das
href
-Attribut verwendet wird. coords
-
Das
coords
-Attribut gibt die Koordinaten desshape
-Attributs in Größe, Form und Platzierung eines<area>
-Elements an. 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. Beispielsweise in<area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla">
sind die Koordinaten0,0
und253,27
, was die obere linke und untere rechte Ecke des Rechtecks darstellt.circle
: der Wert istx,y,radius
. Der Wert spezifiziert die Koordinaten des Kreismittelpunkts und den Radius. 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 spezifiziert die Koordinaten der Kanten des Polygons. Wenn das erste und das letzte Koordinatenpaar nicht identisch sind, fügt der Browser automatisch das letzte Koordinatenpaar hinzu, um das Polygon zu schließen.
Die Werte sind Zahlen in CSS-Pixeln.
download
-
Dieses Attribut zeigt, falls vorhanden, an, dass die verlinkte Ressource heruntergeladen und nicht im Browser angezeigt werden soll. 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
POST
-Anfragen mit dem KörperPING
gesendet werden, wenn der Hyperlink gefolgt wird (im Hintergrund). Typischerweise für das Tracking verwendet. referrerpolicy
-
Ein String, der angibt, welchen 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 ist auf den Ursprung der verweisenden Seite beschränkt: ihr Schema, Host und Port.origin-when-cross-origin
: Der gesendete Referrer zu anderen Ursprüngen ist 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 den gleichen Ursprung gesendet, aber bei Anfragen an andere Ursprünge wird keine Referrer-Information enthalten sein.strict-origin
: Senden Sie nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), aber senden Sie ihn nicht an ein weniger sicheres Ziel (HTTPS→HTTP).strict-origin-when-cross-origin
(Standard): Senden Sie eine vollständige URL bei einer selben Ursprungsanfrage, senden Sie nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und senden Sie keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).unsafe-url
: Der Referrer beinhaltet den Ursprung und den Pfad (jedoch nicht das Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, weil er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge weitergibt.
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 Link-Typen. Die Werte und ihre Semantiken werden von einer Behörde registriert, die für den Dokumentautor eine Bedeutung haben könnte. Die Standardbeziehung, falls keine andere angegeben ist, ist leer. Verwenden Sie dieses Attribut nur, wenn dashref
-Attribut vorhanden ist. shape
-
Die Form des zugehörigen Hotspots. Die HTML-Spezifikationen 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 Stichwort oder ein vom Autor definierter Name des Browsing-Kontextes, um die verlinkte Ressource anzuzeigen. Die folgenden Stichwörter haben spezielle Bedeutungen:
_self
(Standard): Zeigen Sie die Ressource im aktuellen Browsing-Kontext._blank
: Zeigen Sie die Ressource in einem neuen, unbenannten Browsing-Kontext._parent
: Zeigen Sie die Ressource im übergeordneten Browsing-Kontext des aktuellen an, falls die aktuelle Seite in einen Rahmen eingebettet ist. Wenn kein Übergeordneter vorhanden ist, verhält sich dies wie_self
._top
: Zeigen Sie die Ressource im obersten Browsing-Kontext an (der Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen übergeordneten Kontext hat). Wenn kein Übergeordneter vorhanden ist, verhält sich dies wie_self
.
Verwenden Sie dieses Attribut nur, wenn das
href
-Attribut vorhanden ist.Hinweis:>
target="_blank"
an<area>
-Elementen impliziert dasselberel
Verhalten wie das Setzen vonrel="noopener"
, daswindow.opener
nicht festlegt. 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, in Phrasen gegliederter Inhalt. |
---|---|
Zugelassener Inhalt | Keiner; es ist ein void element. |
Tag-Auslassung | Muss ein Start-Tag haben und darf kein End-Tag haben. |
Zulässige Eltern |
Jedes Element, das in Phrasen gegliederten Inhalt akzeptiert. Das <area> -Element muss einen Vorfahren <map> haben, muss aber nicht direkt darüber liegen.
|
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 # the-area-element |
Browser-Kompatibilität
BCD tables only load in the browser