<map>

Zuletzt aktualisiert am 4. Februar 2026

Das <map>-Element definiert eine Image Map: klickbare Bereiche auf einem Bild. Es funktioniert wie eine unsichtbare Schicht über dem Bild, die bestimmte Regionen mit Links verknüpft. Die klickbaren Bereiche werden durch <area>-Elemente definiert und können Rechtecke, Kreise oder Polygone sein.

Grundlagen

Image Maps verbinden ein Bild mit mehreren klickbaren Bereichen. Das <map>-Element ist der Container für die <area>-Elemente, und die Verbindung zum Bild erfolgt über das usemap-Attribut auf dem <img>-Tag. Der Wert von usemap muss mit # beginnen und auf den name des <map> verweisen.

• <map> ist ein Container für <area>-Elemente, es hat selbst keine sichtbare Darstellung
• Die Verbindung zum Bild erfolgt über usemap="#mapname" auf dem <img>-Element
• Das name-Attribut auf <map> ist Pflicht und muss eindeutig auf der Seite sein
• Die klickbaren Bereiche verwenden Pixel-Koordinaten relativ zur Original-Bildgröße
• Image Maps sind nicht responsiv: Die Koordinaten ändern sich nicht mit der Bildgröße
• Für responsive Designs sind CSS-basierte Lösungen oder SVG oft die bessere Wahl
• Trotzdem bleiben Image Maps nützlich für einfache, statische Anwendungsfälle

Syntax

<img src="bild.jpg"
     usemap="#meine-map"
     alt="Beschreibung des Bildes"
     width="300" height="200">

<map name="meine-map">
  <area shape="rect"
        coords="0,0,150,100"
        href="seite1.html"
        alt="Bereich oben links">
  <area shape="rect"
        coords="150,0,300,100"
        href="seite2.html"
        alt="Bereich oben rechts">
</map>

Attribute

Beispiele

Image Map mit verschiedenen Formen

Image Maps unterstützen drei Formen: Rechtecke (rect), Kreise (circle) und Polygone (poly). Hier ein Beispiel, das alle drei kombiniert.

<img src="demo.jpg"
     usemap="#formen-map"
     alt="Interaktive Formen-Demo"
     width="400" height="300">

<map name="formen-map">
  <!-- Rechteck: x1,y1 (oben-links) bis x2,y2 (unten-rechts) -->
  <area shape="rect"
        coords="20,20,180,140"
        href="rechteck.html"
        alt="Rechteckiger Bereich">

  <!-- Kreis: x,y (Mittelpunkt), Radius -->
  <area shape="circle"
        coords="300,80,60"
        href="kreis.html"
        alt="Kreisförmiger Bereich">

  <!-- Polygon: x1,y1, x2,y2, x3,y3 (Eckpunkte) -->
  <area shape="poly"
        coords="100,180,200,280,0,280"
        href="dreieck.html"
        alt="Dreieckiger Bereich">
</map>

Einfache Navigations-Map

Ein klassischer Anwendungsfall: Ein Bild mit mehreren Bereichen, die jeweils auf verschiedene Seiten verlinken, zum Beispiel eine Gebäudekarte, ein Organigramm oder eine Standortkarte.

<img src="navigation.jpg"
     usemap="#nav-map"
     alt="Navigation: Home, Blog, Kontakt"
     width="400" height="120">

<map name="nav-map">
  <area shape="rect"
        coords="0,0,133,120"
        href="/"
        alt="Zur Startseite">
  <area shape="rect"
        coords="133,0,266,120"
        href="/blog"
        alt="Zum Blog">
  <area shape="rect"
        coords="266,0,400,120"
        href="/kontakt"
        alt="Zur Kontaktseite">
</map>

Barrierefreiheit

Image Maps können für Screenreader-Nutzer problematisch sein, wenn sie nicht sorgfältig umgesetzt werden:

• Jedes <area> mit href muss ein alt-Attribut haben: Das ist die einzige Möglichkeit für Screenreader, den Zweck des klickbaren Bereichs zu vermitteln
• Screenreader listen die <area>-Elemente als Links auf, deshalb sollte der alt-Text den Linkzweck beschreiben (nicht die Form oder Position)
• Das <img> selbst braucht ebenfalls ein alt-Attribut, das die Gesamtfunktion der Image Map beschreibt
• Für komplexe Navigation ist eine zusätzliche textbasierte Alternative empfehlenswert, da nicht alle assistiven Technologien Image Maps vollständig unterstützen
• Die Tab-Reihenfolge folgt der Reihenfolge der <area>-Elemente im Quellcode: Sortiere sie logisch

Häufige Fehler

name auf <map> und usemap auf <img> stimmen nicht überein: Die Verbindung funktioniert nur, wenn der usemap-Wert (mit #) exakt dem name der Map entspricht. usemap="#nav" braucht <map name="nav">, nicht name="#nav" und nicht name="navigation".

Koordinaten passen nicht zur Bildgröße: Die coords beziehen sich auf die Original-Pixel des Bildes. Wenn das Bild per CSS verkleinert wird, stimmen die klickbaren Bereiche nicht mehr. Verwende width und height auf dem <img> passend zu den Koordinaten.

Image Map als Haupt-Navigation verwenden: Image Maps sind nicht responsiv und haben Barrierefreiheits-Einschränkungen. Für die Hauptnavigation einer Website verwende besser <nav> mit normalen Links.

alt-Attribut auf <area> vergessen: Ohne alt ist der klickbare Bereich für Screenreader-Nutzer unsichtbar. Jedes <area> mit href braucht einen beschreibenden alt-Text.

Browser-Kompatibilität

Das map-Element wird seit den frühen Tagen des Webs von allen Browsern unterstützt. Es gehört zu den ältesten interaktiven HTML-Features.

Email-Kompatibilität

Image Maps werden von überraschend vielen Email-Clients unterstützt: Sie sind eine der wenigen interaktiven HTML-Features, die in E-Mails funktionieren.

Verwandte Elemente