<area>

Zuletzt aktualisiert am 4. Februar 2026

Das <area>-Element definiert einen klickbaren Bereich innerhalb einer Image Map. Es verhält sich wie ein unsichtbarer Link, der über einem bestimmten Teil eines Bildes liegt. Die Form und Position des Bereichs wird über shape und coords bestimmt — Rechtecke, Kreise und beliebige Polygone sind möglich.

Grundlagen

<area> ist das Element, das Image Maps interaktiv macht. Ohne <area> wäre eine <map> nur ein leerer Container. Jedes <area> beschreibt genau einen klickbaren Bereich mit Form, Koordinaten und Ziel-URL.

• <area> ist ein Void-Element: Es hat keinen schließenden Tag und keinen Inhalt
• Es darf nur innerhalb von <map> verwendet werden — außerhalb hat es keine Wirkung
• Das shape-Attribut bestimmt die Form: rect (Rechteck), circle (Kreis), poly (Polygon) oder default (gesamtes Bild)
• Die coords definieren die Pixel-Koordinaten der Form, relativ zur Original-Bildgröße
• <area> verhält sich wie ein <a>-Element: Es unterstützt href, target, download und rel
• Wenn href gesetzt ist, ist das alt-Attribut Pflicht
• Ohne href ist <area> ein nicht-interaktiver Bereich — er blockiert dann Klicks auf darunterliegende Bereiche

Syntax

<img src="bild.jpg"
     usemap="#meine-map"
     alt="Bild mit klickbaren Bereichen"
     width="300" height="200">

<map name="meine-map">
  <area shape="rect"
        coords="50,50,250,150"
        href="ziel.html"
        alt="Klickbarer Bereich">
</map>

Attribute

Beispiele

Rechteckige Bereiche (rect)

Rechtecke sind die einfachste Form. Die Koordinaten definieren die obere linke Ecke (x1,y1) und die untere rechte Ecke (x2,y2).

<img src="bereiche.jpg"
     usemap="#rect-map"
     alt="Zwei klickbare Bereiche"
     width="400" height="100">

<map name="rect-map">
  <!-- x1,y1 (oben-links) bis x2,y2 (unten-rechts) -->
  <area shape="rect"
        coords="0,0,200,100"
        href="bereich1.html"
        alt="Bereich 1">
  <area shape="rect"
        coords="200,0,400,100"
        href="bereich2.html"
        alt="Bereich 2">
</map>

Kreisförmiger Bereich (circle)

Kreise werden durch Mittelpunkt (x,y) und Radius definiert. Sie eignen sich gut für runde Buttons, Icons oder Punkte auf einer Karte.

<img src="karte.jpg"
     usemap="#circle-map"
     alt="Standortkarte"
     width="300" height="300">

<map name="circle-map">
  <!-- x,y (Mittelpunkt), Radius -->
  <area shape="circle"
        coords="150,150,80"
        href="standort.html"
        alt="Unser Standort">
</map>

Polygon (poly)

Polygone erlauben beliebige Formen. Die Koordinaten sind Paare von x,y-Werten für jeden Eckpunkt. Der Browser verbindet den letzten Punkt automatisch mit dem ersten.

<img src="formen.jpg"
     usemap="#poly-map"
     alt="Bild mit Dreieck"
     width="300" height="260">

<map name="poly-map">
  <!-- Eckpunkte: x1,y1, x2,y2, x3,y3 -->
  <area shape="poly"
        coords="150,20,280,240,20,240"
        href="dreieck.html"
        alt="Dreieckiger Bereich">
</map>

Default-Bereich als Fallback

shape="default" deckt das gesamte Bild ab. Er wird als Fallback verwendet — wenn ein Klick keinen anderen Bereich trifft, greift der Default-Bereich.

<img src="bild.jpg"
     usemap="#fallback-map"
     alt="Bild mit Fallback-Link"
     width="400" height="300">

<map name="fallback-map">
  <area shape="circle"
        coords="200,150,60"
        href="details.html"
        alt="Details anzeigen">
  <!-- Fallback für den Rest des Bildes -->
  <area shape="default"
        href="uebersicht.html"
        alt="Zur Übersicht">
</map>

Barrierefreiheit

Das alt-Attribut auf <area> ist der Schlüssel zur Barrierefreiheit. Screenreader listen die <area>-Elemente als Links auf — ohne alt-Text wären diese Links stumm und unbrauchbar.

Formuliere den alt-Text so, dass er den Zweck des Links beschreibt, nicht die Form oder Position:

• Gut: alt="Zum Blog", alt="Unseren Standort auf der Karte anzeigen"
• Schlecht: alt="Rechteck oben links", alt="Klicken Sie hier"

Bei komplexen Image Maps solltest du eine textbasierte Alternative anbieten — zum Beispiel eine Liste mit den gleichen Links unterhalb des Bildes. So stellst du sicher, dass alle Nutzer die Navigation nutzen können, auch wenn die Image Map nicht zugänglich ist.

Häufige Fehler

alt-Attribut fehlt bei <area> mit href: Wenn ein <area> ein href hat, ist alt laut HTML-Spezifikation Pflicht. Ohne alt ist der klickbare Bereich für Screenreader-Nutzer unsichtbar.

coords passen nicht zur shape: Jede Form hat ein eigenes Koordinaten-Format. rect braucht 4 Werte, circle braucht 3, poly braucht mindestens 6 (3 Punkte). Falsche Anzahl oder Reihenfolge führt zu unerwartetem Verhalten.

<area> außerhalb von <map> verwenden: Ein <area> ohne umschließendes <map> hat keine Funktion. Der Browser ignoriert es stillschweigend — kein Fehler, aber auch keine Wirkung.

Überlappende Bereiche ohne Priorisierung: Wenn sich <area>-Bereiche überlappen, gewinnt der zuerst definierte. Das kann verwirrend sein, wenn der Nutzer auf einen Überlappungsbereich klickt und nicht den erwarteten Link erhält. Vermeide Überlappungen oder sortiere die <area>-Elemente so, dass kleinere Bereiche vor größeren stehen.

Browser-Kompatibilität

Das area-Element wird seit den Anfängen des Webs von allen Browsern unterstützt. Alle Formen (rect, circle, poly, default) funktionieren zuverlässig.

Email-Kompatibilität

area-Elemente innerhalb von Image Maps werden von den meisten Email-Clients unterstützt — Image Maps gehören zu den wenigen interaktiven HTML-Features, die in E-Mails breit funktionieren.

Verwandte Elemente