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

chrome edge firefox safari opera

Übe dein Wissen

Was sind die Attribute des <area>-Tags in HTML?
Finden Sie das nützlich?