Beispiel
Ein Bild-Karte, 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>
Versuch es selber " Definition und Verwendung
Die <area> Tag definiert einen Bereich innerhalb eines Bild-Karte (eine Bildkarte ist ein Bild mit anklickbaren Bereiche).
Das <area> Element befindet sich in einem immer verschachtelt <map> -Tag.
Hinweis: Das usemap Attribut im <img> Tag wird im Zusammenhang mit dem <map> name - Attribut des Elements, und schafft eine Beziehung zwischen dem Bild und der Karte.
Browser-Unterstützung
| Element | |||||
|---|---|---|---|---|---|
| <area> | ja | ja | ja | ja | ja |
Unterschiede zwischen HTML 4.01 und HTML5
HTML5 hat einige neue Attribute und einige HTML 4.01 Attribute werden nicht mehr unterstützt.
Unterschiede zwischen HTML und XHTML
In HTML das <area> Tag hat kein Ende - Tag.
In XHTML das <area> Tag richtig geschlossen werden müssen.
Attribute
= Neu in HTML5.
| Attribut | Wert | Beschreibung |
|---|---|---|
| alt | text | Gibt einen alternativen Text für die Gegend. Erforderlich , wenn das href Attribut vorhanden ist , |
| coords | coordinates | Gibt die Koordinaten des Bereichs |
| download | filename | Gibt an, dass das Ziel heruntergeladen wird, wenn ein Benutzer auf den Hyperlink klickt |
| href | URL | Gibt die Hyperlink-Ziel für den Bereich |
| hreflang | language_code | Gibt die Sprache der Ziel-URL |
| media | media query | Gibt an, welche Medien / Gerät die Ziel-URL für optimiert |
| nohref | value | Nicht in HTML5 unterstützt. Gibt an, dass ein Bereich keine Verbindung zugeordnet ist, |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | Gibt die Beziehung zwischen dem aktuellen Dokument und dem Ziel-URL |
| shape |
default rect circle poly | Gibt die Form des Bereichs |
| target | _blank _parent _self _top framename | Gibt an, wo die Ziel-URL zu öffnen |
| type | media_type | Gibt den Medientyp der Ziel-URL |
globale Attribute
Die <area> Tag unterstützt auch den Global in HTML - Attribute .
Event-Attribute
Die <area> Tag unterstützt auch die Veranstaltung in HTML - Attribute .
Verwandte Seiten
HTML - DOM - Referenz: Bereichs Objekt
Standard CSS-Einstellungen
Die meisten Browser erscheint auf dem Display <area> Element mit den folgenden Standardwerte:
area {
display:
none;
}