HTML-<area>-Tag
Beispiel
Eine Bildkarte mit anklickbaren Bereichen:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
Try it Yourself »
Weitere "Try it Yourself" („Probieren Sie es selbst“)-Beispiele weiter unten.
Definition und Verwendung
Das Tag <area> definiert einen Bereich innerhalb einer Imagemap (eine Imagemap ist ein Bild mit anklickbaren Bereichen).
<area>-Elemente werden immer in einer verschachtelt <map>-Tag.
Notiz: Das Attribut usemap in <img> ist verknüpft mit dem name des Elements <map> Attribut und stellt eine Beziehung zwischen dem Bild und her die Karte.
Browser-Unterstützung
| Element | |||||
|---|---|---|---|---|---|
| <area> | Ja | Ja | Ja | Ja | Ja |
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| alt | text | Geben Sie einen alternativen Text für den Bereich an. Erforderlich, wenn das href-Attribut vorhanden ist |
| coords | coordinates | Geben Sie die Koordinaten des Bereichs an |
| download | filename | Geben Sie an, dass das Ziel heruntergeladen wird, wenn ein Benutzer auf den Hyperlink klickt |
| href | URL | Geben Sie das Hyperlink-Ziel für den Bereich an |
| hreflang | language_code | Geben Sie die Sprache der Ziel-URL an |
| media | media query | Geben Sie an, für welches Medium/Gerät die Ziel-URL optimiert ist |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Geben Sie an, welche Referrer-Informationen mit dem Link gesendet werden sollen |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
Gibt die Beziehung zwischen dem aktuellen Dokument und der Ziel-URL an |
| shape |
default rect circle poly |
Geben Sie die Form des Bereichs an |
| target | _blank _parent _self _top framename |
Geben Sie an, wo die Ziel-URL geöffnet werden soll |
| type | media_type | Geben Sie den Medientyp der Ziel-URL an |
Globale Attribute
Das Tag <area> unterstützt auch die Globale Attribute in HTML.
Ereignisattribute
Das Tag <area> unterstützt auch die Ereignisattribute in HTML.
Weitere Beispiele
Beispiel
Eine weitere Bildkarte mit anklickbaren Bereichen:
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
Try it Yourself »
Verwandte Seiten
HTML-DOM-Referenz: Flächenobjekt.
Standard-CSS-Einstellungen
Die meisten Browser zeigen das Element <area> mit den folgenden Standardwerten an:
area {
display: none;
}
