<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.
* Some parts of this feature may have varying levels of support.
Das <area>
HTML-Element definiert einen Bereich innerhalb einer Image-Map, die vordefinierte anklickbare Bereiche hat. Eine Image-Map 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
-
Ein alternativer Textstring, der in Browsern angezeigt wird, die keine Bilder anzeigen. Der Text sollte so formuliert sein, dass er dem Benutzer dieselbe Art von Auswahl präsentiert, wie das Bild es ohne den alternativen Text 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 einer<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 gibt bei<area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla">
der Wert0,0
und253,27
die obere linke und die untere rechte Ecke des Rechtecks an.circle
: Der Wert istx,y,radius
. Der Wert gibt die Koordinaten des Kreismittelpunkts und des 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 Eckpunkte des Polygons an. Wenn das erste und das 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 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 repräsentiert das
<area>
-Element keinen Hyperlink. ping
-
Enthält eine durch Leerzeichen getrennte Liste von URLs, an die, wenn der Hyperlink gefolgt wird,
POST
-Anfragen mit dem KörperPING
vom Browser (im Hintergrund) gesendet werden. Typischerweise für Tracking verwendet. referrerpolicy
-
Ein String, der angibt, welchen Referrer verwendet werden soll, wenn die Ressource abgerufen wird:
no-referrer
: DerReferer
-Header wird nicht gesendet.no-referrer-when-downgrade
: DerReferer
-Header wird nicht an Ursprunge 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 Referrer, der an andere Ursprünge gesendet wird, ist auf das Schema, den Host und den Port beschränkt. Navigationen auf demselben Ursprung enthalten weiterhin den Pfad.same-origin
: Ein Referrer wird für gleichen Ursprung gesendet, aber Anfragen über verschiedene Ursprünge enthalten keine Referrer-Informationen.strict-origin
: Sendet nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitseingestufte Protokoll gleich bleibt (HTTPS→HTTPS), aber sendet es nicht an ein weniger sicheres Ziel (HTTPS→HTTP).strict-origin-when-cross-origin
(default): Sendet eine vollständige URL, wenn eine Anfrage an denselben Ursprung gestellt wird, sendet nur den Ursprung, wenn das Sicherheitseingestufte Protokoll gleich bleibt (HTTPS→HTTPS), und sendet keinen Header zu einem weniger sicheren Ziel (HTTPS→HTTP).unsafe-url
: Der Referrer enthält den Ursprung und den Pfad (aber nicht den Fragment, das Passwort oder den Benutzernamen). Dieser Wert ist unsicher, weil er Ursprünge und Pfade von TLS-geschützten Ressourcen zu unsicheren Ursprüngen leckt.
rel
-
Für Anker, die das
href
-Attribut enthalten, gibt dieses Attribut die Beziehung des Zielobjekts zum Link-Objekt an. Der Wert ist eine durch Leerzeichen getrennte Liste von Link-Typen. Die Werte und ihre Semantik werden von einer Autorität registriert, die für den Dokumentautor von Bedeutung 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
, das den gesamten Bereich jenseits aller definierten Formen angibt. 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
(default): 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, falls die aktuelle Seite innerhalb eines Rahmens ist. Wenn es keinen übergeordneten Kontext gibt, verhält es sich wie_self
._top
: Zeigt die Ressource im obersten Browsing-Kontext an (dem Browsing-Kontext, der ein Vorfahre des aktuellen Kontextes ist und keinen übergeordneten Kontext hat). Wenn es keinen übergeordneten Kontext gibt, verhält es sich wie_self
.
Verwenden Sie dieses Attribut nur, wenn das
href
-Attribut vorhanden ist.Hinweis: Wenn
target="_blank"
bei<area>
-Elementen eingestellt ist, bietet es implizit dasselberel
-Verhalten wierel="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ßende Inhalte, Phrasierungsinhalte. |
---|---|
Erlaubter Inhalt | Keiner; es ist ein leeres Element. |
Tag-Auslassung | Muss ein Start-Tag haben und darf kein End-Tag haben. |
Erlaubte Eltern |
Jedes Element, das Phrasierungsinhalte akzeptiert. Das <area> -Element muss einen Vorfahren <map> haben, aber es muss 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 |