Das Tag <area> bestimmt die aktiven Bereiche von Image-Map (Koordinate, Form, Größe usw.), die durch das Tag <map> definiert wird. Durch den Klick auf den aktiven Bereich des Images geschieht eine bestimmte Handlung, zum Beispiel wird eine neue Seite mit mehr Information eröffnet.
Das Tag <area> wird immer im Tag <map> platziert. Die aktiven Bereiche können einander überdecken. In diesem Fall wird beim Klicken der Bereich aktiviert, der Im HTML-Code höher liegt.
Syntax
Das Tag <area> wird gepaart verwendet, das Endtag ist obligatorisch.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p>Klicken Sie auf das Logo oder auf ein der Logoelemente, um sie näher zu betrachten:</p>
<img src="/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="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png">
<area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png">
<area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png">
<area class="homepage" shape="rect" coords="90,90,35,55" alt="php" href="https://www.w3docs.com/">
</map>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| alt | text | Es erzeugt einen alternativen Text für den aktiven Bereich. |
| coords | Es definiert die Koordinaten des aktiven Gebietes. | |
| x1,y1,x2,y2 | Obere linke und untere rechte Ecke des Rechtecks (shape="rect") | |
| x,y,Umkreis | Kreiszentrum und Umkreis (shape="circle") | |
| x1,y1,x2,y2,...,xn,yn | Spitze des Vielecks (shape="poly") | |
| download | filename | Es bestimmt, dass beim Klicken auf bestimmten Bereich die Datei heruntergeladen werden soll (dem Benutzer wird angeboten, die Datei zu speichern). |
| href | URL | Es deutet auf den Link für Weiterleitung hin. |
| hreflang | language_code | Es definiert die Sprache des Dokuments, worauf der Link führt. Es wird nur mit dem Attribut href verwendet. |
| media | media query | Es definiert, für welche Gerätentypen angegebene URL optimiert werden muss. Der Wert kann beliebige Media-Anfrage sein. |
| nohref | value | Es definiert den Bereich, der keine Links zu andern Dokumenten enthält. Es wird in HTML nicht unterstützt. |
| rel | Es verbindet die aktuellen und verbundenen Dokumente. | |
| alternate | Link zur alternativen Version des Dokuments | |
| author | Link zum Autor des Dokuments | |
| bookmark | Beständiger Link zum Dokument | |
| help | Link zum Dokument mit Bescheinigung | |
| license | Link zur Seite mit einem Endbenutzer-Lizenzvertrag oder Urheberrecht | |
| next | Link zur nächsten Seite/Abschnitt | |
| nofollow | Es bestimmt, dass die Suchmaschine mit dem Link von TIC und PR nicht übergeben muss. | |
| noreferrer | Es bestimmt, dass der Browser keine HTTP-Überschrift senden muss, wenn der Benutzer durch den Link weitergeleitet wurde. | |
| prefetch | Es deutet darauf hin, dass das verbundene Dokument gecached sein muss. | |
| prev | Link zur vorigen Seite/Abteilung | |
| search | Link zur Suche des Dokuments | |
| tag | Es definiert das Tag im aktuellen Dokument | |
| shape | Es definiert die Form des Bereichs. | |
| default | Voreingestellter Bereich (rechteckig) | |
| rect | Rechteckiger Bereich | |
| circle | Bereich in der Kreisform | |
| poly | Vieleckig | |
| target | Es definiert, wie das verbundene Dokument eröffnet wird. Es wird in HTML5 nicht unterstützt. |
|
| _blank | Im neuen Fenster | |
| _self | Im aktuellen Fenster | |
| _top | Mit der ganzen Fensterbreite | |
| _parent | Im Elternframe | |
| frame_name | Im Frame | |
| type | media_type | Es definiert den MIME-Typ (Spezifikation für die Übertragung von verschiedenen Dateien durch das Netz) des verbundenen Dokuments. |
Das Tag <area> unterschtützt auch Globale Attribute und Globale Eventhandler.
Browser-Support
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Übe dein Wissen
Was sind die Attribute des <area>-Tags in HTML?
Richtig!
Falsch!