HTML Element - `area`

Mit dem <area>-Element lassen sich innerhalb eines Bildes definierte Bereiche anklickbar machen. Es wird in sogenannten Image Maps verwendet und ermöglicht es, unterschiedliche Regionen eines Bildes mit eigenen Links oder Aktionen zu versehen.

Beispiel

<img src="images/sonnensystem.png" width="300" height="258" alt="Ausschnitt des Sonnensystems" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,71,27,216" href="images/sonne.png" target="_blank" alt="Sonne anzeigen">
<area shape="circle" coords="96,148,11" href="images/merkur.png" target="_blank" alt="Merkur anzeigen">
<area shape="circle" coords="151,148,19" href="images/venus.png" target="_blank" alt="Venus anzeigen">
<area shape="circle" coords="215,147,22" href="images/erde.png" target="_blank" alt="Erde anzeigen">
<area shape="circle" coords="271,151,18" href="images/mars.png" target="_blank" alt="Mars anzeigen">
</map>

Definition und Verwendung

Das area-Tag definiert einen Bereich innerhalb einer Image Map (eine Image Map ist ein Bild mit anklickbaren Bereichen).

area-Elemente sind immer innerhalb eines map-Tags verschachtelt.

Das usemap-Attribut in img ist mit dem name-Attribut des map-Elements verknüpft und stellt eine Beziehung zwischen dem img und der usemap her.

Attribute

Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.

Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.

Attribute-Tabelle
Attribut	Wert	Beschreibung
alt	AlternativText	Definiert einen Alternativtext, falls ein Bild nicht angezeigt werden kann.
shapes	circle, rect	Definiert die Form einer klickbaren Fläche.
coords	Koordinaten	Definiert Koordinaten für eine klickbare Fläche in einer Image-Map.

Beispiel mit Attributen

In diesem Beispiel ist der Bereich für die Koordinaten durch einen blauen Kreis sichtbar gemacht worden.

Die Koordinaten wurden wie folgt fest gelegt und beziehen sich immer auf das Bild.

Mittelpunkt des Kreises

x = 151 px → Abstand von links
y = 148 px → Abstand von oben
Radius = 19 px

<img src="images/sonnensystem-circle.png" width="300px" height="258px" alt="Ausschnitt des Sonnensystems" usemap="#planetmap">

<map name="planetmap">
<area shape="circle" coords="151,148,19" href="images/venus.png" target="_blank" alt="Venus anzeigen">
</map>

Standardbrowser CSS

Webbrowser wenden auf viele Elemente vordefinierte CSS-Stile an, die eine grundlegende Struktur und Lesbarkeit sicherstellen. Umfang und Ausgestaltung dieser Standardstile können je nach Browser variieren, etwa in Bezug auf Abstände, Schriftgrößen oder die Darstellung einzelner Elemente.

area {
display: none;
}

Browserunterstützung

Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.

Diese Tabelle zeigt die Unterstützung des `area` durch gängige Webbrowser und ordnet dessen Verfügbarkeit im aktuellen Browserumfeld ein.
Element	Firefox	Internet Explorer / Edge	Safari	Chrome	Opera
`<area>`