HTML <area>-Tag
Das <area>-Tag definiert die aktiven Bereiche (Koordinaten, Form, Größe usw.) der Image Map, die durch das <map>-Tag festgelegt wird. Wenn Sie auf einen aktiven Bereich des Bildes klicken, wird eine bestimmte Aktion ausgeführt, z. B. das Wechseln zu einer Seite mit detaillierten Informationen.
Das <area>-Tag wird immer innerhalb des <map>-Tags platziert. Aktive Bereiche können sich überlappen, in diesem Fall wird der Bereich aktiviert, der später in der DOM-Reihenfolge erscheint, wenn er angeklickt wird.
Syntax
Das <area>-Tag ist leer, was bedeutet, dass das schließende Tag nicht erforderlich ist. In XHTML muss das <area>-Tag jedoch geschlossen werden (<area />).
Beispiel für das HTML <area>-Tag:
HTML-Tag <area>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Click on the logo or on one of the logo item to watch it closer:</p>
<img src="https://de.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="block" usemap="#blockmap" />
<map name="blockmap">
<area shape="circle" coords="50,32,25" alt="html" href="https://de.w3docs.com/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
<area shape="circle" coords="218,115,25" alt="css" href="https://de.w3docs.com/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
<area shape="circle" coords="195,32,28" alt="php" href="https://de.w3docs.com/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
<area class="homepage" shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
</map>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| alt | text | Gibt einen alternativen Text für den aktiven Bereich an. |
| coords | x1,y1,x2,y2 | x,y,radius | x1,y1,...,xn,yn | Gibt die Koordinaten des aktiven Bereichs an. Die Werte hängen von der Form ab: rect (oben links und unten rechts), circle (Mitte und Radius) oder poly (Polygon-Eckpunkte). |
| download | filename | Gibt an, dass die Datei heruntergeladen werden muss, wenn auf einen bestimmten Bereich geklickt wird. |
| href | URL | Gibt die Ziel-URL für den Link an. |
| hreflang | language_code | Definiert die Sprache des verlinkten Dokuments. Wird nur zusammen mit href verwendet. |
| nohref | (none) | Gibt einen Bereich an, der keinen Link enthält. Wird in HTML5 nicht unterstützt. |
| rel | alternate | author | bookmark | help | license | next | nofollow | noreferrer | prefetch | prev | search | tag | Stellt eine Beziehung zwischen dem aktuellen und dem verlinkten Dokument her. |
| shape | rect | circle | poly | Definiert die Form des Bereichs. |
| target | _blank | _self | _top | _parent | frame_name | Gibt an, wie das verlinkte Dokument geöffnet werden soll. frame_name wird in HTML5 nicht unterstützt. |
| type | media_type | Gibt den MIME-Typ des verlinkten Dokuments an. |
Das <area>-Tag unterstützt auch die Globalen Attribute und die Ereignisattribute.
Praxis
Was ist der Zweck des HTML area-Tags und welche Attribute hat es?