Tag <area>

Tag <area>

Definition

Status: Aktueller Standard

Das Tag <area> steht für area (Bereich, Fläche).

Das HTML-Element <area> wird in Verbindung mit dem <map>-Element verwendet, um interaktive Bereiche innerhalb von Bildern zu definieren. So werden innerhalb einer Image Map (einer anklickbaren Grafik) interaktive Bereiche definiert und mit unterschiedlichen Links verknüpft. Bei einer Europakarte kann man mittels <area>-Elementen z.B. die einzelnen Länder als anklickbare Bereiche definieren und mit entsprechenden Links versehen. Es gibt drei Arten von Bereichen: Rechteck (rect), Kreis (circle) und Polygon (poly). <area> kann nur innerhalb eines <map>-Elements verwendet werden und hat kein schließendes Tag!

Syntax

<area shape="..." coords="..." href="..." alt="...">

Attribute

shape: Der zu verwendende Umriß (rect, circle, poly oder default)
coords: Die Pixel-Koordinaten (basierend auf der oberen linken Ecke des Bildes)
href: Das Ziel des Links
alt: Ein Alternativtext (Pflicht für Barrierefreiheit!)
download: Ziel wird zum downloaden angeboten anstatt zu öffnen (nur bei href-Attribut)

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel area

Der Code:

<img src="kamera.png" width="430" height="300" alt="Kamera" usemap="#kamera-map">

<map name="kamera-map">
  <!-- Ein Rechteck für den Auslöser -->
  <area shape="rect" coords="32,44,146,109" href="ausloeser.html" alt="Zum Auslöser">
  
  <!-- Ein Kreis für das Objektiv -->
  <area shape="circle" coords="233,179,88" href="objektiv.html" alt="Zum Objektiv">
</map>

Ergebnis:

Ergebnis: <area>-Demo 1

Hier wird eine Image Map definiert. Das Bild kamera.jpg ist 430 Pixel breit und 300 Pixel hoch. Es gibt zwei interaktive Bereiche: Ein Rechteck (rect) für den Auslöser mit den Koordinaten (32,44) für die obere linke Ecke und (146,109) für die untere rechte Ecke. Ein Kreis (circle) für das Objektiv mit den Koordinaten (233,179) für den Mittelpunkt und einem Radius von 88 Pixeln.

Beim Klick auf den Auslöser oben links bzw. auf das runde Objektiv öffnet sich jeweils eine andere Seite.

Anmerkungen

In Zeiten von Responsive Design (Darstellungsanpassung an Bildschirmgröße) ist das klassische <map>-Tag problematisch, da die festen Pixel-Koordinaten sich nicht mit skalierenden Bildern anpassen. Heutzutage nutzt man dafür eher SVG-Grafiken oder CSS-Overlays um interaktive Bereiche zu definieren, die sich flexibel an die Bildschirmgröße anpassen können. Das <map>-Element und seine <area>-Elemente sind daher eher eine historische Kuriosität und werden in modernen Webprojekten selten verwendet.