mitmario.dev

<map>

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.

Steckbrief <map>
Kategorie
Links & Medien
Art
Inline
Attribute
1
Beispiele
2
Browser
5 von 5
E-Mail
5 von 5
Stand
04.02.2026

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

index.html
Grundsyntax
<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

1 Attribut
Attribut und Beispiel Beschreibung
name String
name="navigation"
Eindeutiger Name der Image Map. Wird vom usemap-Attribut des img-Elements referenziert (mit vorangestelltem #). Pflicht-Attribut.

Beispiele

2 Beispiele

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

index.html
Verschiedene Formen
<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>

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

4 Fehler
01 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".
02 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.
03 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.
04 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

5 von 5

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.

  • Chrome

    Komplett

    Seit Version 1

  • Firefox

    Komplett

    Seit Version 1

  • Safari

    Komplett

    Seit Version 1

  • Edge

    Komplett

  • Opera

    Komplett

Email-Kompatibilität

5 von 5

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

  • Apple Mail

    Komplett

    Volle Unterstützung für Image Maps mit allen Formen.

  • Gmail

    Komplett

    Gmail unterstützt Image Maps korrekt, einer der wenigen interaktiven Features, die in Gmail funktionieren.

  • Outlook

    Komplett

    Outlook unterstützt Image Maps zuverlässig, auch in älteren Versionen.

  • Thunderbird

    Komplett

  • Yahoo Mail

    Komplett

    Volle Unterstützung.

Newsletter

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

Danach kommt eine Mail mit Bestätigungslink, erst dann bist du eingetragen. Abmelden geht unten in jeder Ausgabe. Mehr dazu in der Datenschutzerklärung.