HTML-Imagemaps

Das Picture-Element wählt unter Bild-Dateien. Eine Imagemap behält ein Bild und macht Bereiche davon klickbar — Hotspots auf einem Grundriss, einem Diagramm oder einem einfachen Grafikmenü. Sie koppeln ein img mit usemap an eine <map> voller <area>-Links.

Was eine Imagemap ist

Eine Imagemap ist kein separates Bildformat. Es ist HTML, das sagt: „Dieses Rechteck (oder dieser Kreis oder dieses Polygon) auf dem Bild soll sich wie ein Link verhalten.“ Sehende Nutzer klicken die Zone; assistive Technik braucht ein klares alt auf jedem area, weil neben dem Hotspot oft kein sichtbarer Text steht.

Direkte Antwort

1. Setzen Sie usemap="#mapname" am img.
2. Fügen Sie <map name="mapname"> mit einem oder mehreren <area>-Elementen hinzu.
3. Jedes area braucht shape, coords, href und ein eigenes alt.
   Das # bei usemap muss zum name der Map passen (keine zweite Schreibweise erfinden).

Shape-Werte auf einen Blick

Eine einfache rechteckige Map

Zwei Hotspots auf einem Schreibtisch-Layout reichen, um die Verdrahtung zu lernen: usemap, passender name und area-Rechtecke mit ehrlichem alt-Text.

Das Beispiel lesen

• usemap="#deskmap" am Bild zeigt auf die Map namens deskmap
• Jedes area ist ein Link: href ist das Ziel, alt benennt den Hotspot
• coords für rect sind links, oben, rechts, unten im Pixelraster des Bildes
• Das eigene alt des Bildes („Desk layout“) beschreibt die gesamte Grafik; Area-Alts benennen die Zonen

Wie Koordinaten funktionieren

Koordinaten werden in CSS-Pixeln des Bildes gemessen, wie es für die Map ausgelegt ist. Wenn Sie width und height am img setzen, halten Sie Ihre coords beim Lernen konsistent mit dieser Anzeigegröße. Falsche Zahlen erzeugen Hotspots, die die gezeichneten Objekte verfehlen — ein häufiges stilles Versagen.

Barrierefreiheits-Gewohnheiten

Jedes klickbare area braucht ein sinnvolles alt. Lassen Sie Hotspots nicht unbenannt. Bevorzugen Sie Maps, bei denen der Zweck jeder Region klar ist. Braucht das Design komplexes responsives Verhalten, wechseln viele Teams zu SVG mit Links oder getrennten Buttons statt fragiler Pixel-Maps.

Wann Maps helfen — und wann nicht

Maps helfen bei einem einzelnen Diagramm mit wenigen stabilen Regionen. Sie werden unhandlich, wenn das Bild frei über viele Breakpoints skaliert, weil klassische coords sich nicht automatisch neu schreiben. Für moderne responsive UIs kommen separate verlinkte Bilder, CSS-Layout oder SVG infrage. Trotzdem hilft Wissen über Imagemaps, wenn Sie ältere Seiten oder einfache Lehrdemos erben.

circle und poly (kurze Notiz)

circle nutzt Mittelpunkt und Radius. poly listet x,y-Paare um eine freie Form. Beginnen Sie mit rect, bis die Paarung usemap / name natürlich wirkt, und experimentieren Sie dann mit anderen Formen auf einer Übungsgrafik.

Übung in Ihrem Editor

1. Nutzen Sie ein einfaches breites Bild mit zwei klaren Regionen.
2. Erstellen Sie eine map mit zwei rect-Areas, die auf zwei kleine Übungsseiten verlinken.
3. Stimmen Sie usemap="#name" sorgfältig mit map name="name" ab (einschließlich #).
4. Klicken Sie jede Region und bestätigen Sie die Navigation.
5. Brechen Sie die Namensübereinstimmung einmal, beobachten Sie die toten Hotspots und beheben Sie es.
6. Verbessern Sie jedes area, dessen alt nur „link“ sagt.

Leichte Fehler

• Nicht übereinstimmendes usemap / name (# bei usemap vergessen oder nur eine Seite umbenannt)
• Fehlendes alt auf jedem area
• Coords, die nicht zur echten Bildgröße oder Objektposition passen
• Imagemaps für stark fließende responsive Layouts ohne Plan zu nutzen
• Die einzige Beschreibung nur am img zu lassen und Areas unbeschriftet zu lassen

Zusammenfassung

• Imagemaps verdrahten img + usemap + map + area
• Formen umfassen rect, circle und poly
• Jedes area braucht href, alt, shape und coords
• Namen abgestimmt und coords ehrlich halten
• Für komplexe responsive UIs moderne Alternativen bedenken — Maps trotzdem für Legacy und einfache Diagramme lernen