Interaktive Bilder auf eigener HTML-Seite: Imagemap, SVG-Hotspots und moderne Embeds
Auf einer selbstgebauten HTML-Seite hast du alle Freiheiten. Drei Wege zu klickbaren Bildbereichen — von altem HTML bis zur SVG-basierten Lösung.
Volle Freiheit auf der eigenen HTML-Seite
Auf einer selbst gebauten HTML-Seite gibt es keine CMS-Beschränkungen, keine Plugin-Filter, keine Editor-Quirks. Du hast volle Kontrolle über jeden Tag und jeden Pixel. Genau deswegen lohnt sich hier ein nüchterner Vergleich der drei sauberen Wege.
Weg 1: Klassische HTML-Imagemap
Die ursprüngliche, in HTML 3.2 standardisierte Lösung. Funktioniert in jedem Browser seit den 90ern. Ein img-Tag mit usemap-Attribut, ein map-Tag mit beliebig vielen area-Elementen. Jedes area kann shape="rect", "circle" oder "poly" sein und definiert über coords die klickbare Fläche, über href das Linkziel und über alt einen sinnvollen Beschreibungstext.
Vorteile: Kein JavaScript, kein externer Service, sehr robust, suchmaschinenfreundlich (Links in der Map werden als echte Links erkannt). Nachteile: Nicht responsive. Wenn das Bild kleiner gerendert wird als die Koordinaten erwarten, klicken Besucher ins Leere. Tooltips sind nur als title-Attribut möglich (Browser-Default-Tooltip, hässlich, langsam, auf Touch-Geräten unzuverlässig).
Workaround für Responsive: image-map-resizer
Eine kleine JavaScript-Bibliothek (gibt es als image-map-resizer auf GitHub) hängt sich an die Imagemap und passt die Koordinaten in Echtzeit an die aktuelle Bildgröße an. Hilft beim Skalierungsproblem, ändert aber nichts an der hässlichen Tooltip-Darstellung.
Weg 2: SVG mit Hotspots — moderner Ansatz
Wenn du das Bild ohnehin als SVG vorliegen hast oder bereit bist, eine kleine Wrapper-Struktur zu bauen, ist SVG die deutlich elegantere Lösung. Hotspots werden als unsichtbare oder halbtransparente SVG-Shapes definiert, die per CSS animiert und per JavaScript mit Tooltips versehen werden.
Konkret: Ein Container mit position:relative, darin das Bild als img-Tag und darüber ein SVG-Element mit absoluter Positionierung. Im SVG kommen circle, rect oder polygon-Shapes mit eigenen Hover-Effekten. Vorteile gegenüber Imagemap: Voll responsive (das SVG skaliert mit dem Container), animierbar per CSS, beliebige Formen, eigene Hover-Effekte.
Nachteile: Mehr Code, etwas mehr CSS-Verständnis nötig. Für komplexere Tooltips (mit Bildern, Buttons, Videos) musst du JavaScript-Logik schreiben.
Weg 3: Externe Tools per Embed
Wenn du nicht Code schreiben willst, ist ein dediziertes Tool wie picpins der pragmatische Weg. Du erstellst das interaktive Bild im Browser des Anbieters und kopierst dir einen Embed-Code. Den Code fügst du an die gewünschte Stelle deiner HTML-Datei ein. Das war's.
Vorteile: Tooltips mit Bildern, Buttons, Videos out of the box. Mobilgeräte-tauglich. Mehrere Ansichten desselben Bildes möglich. Änderungen am Inhalt müssen nicht im HTML, sondern nur im Anbieter-Dashboard gepflegt werden. Nachteile: Abhängigkeit von einem externen Service. Wenn der Anbieter weg ist, sind die Hotspots weg. Bei kritischer Infrastruktur lieber selbst hosten.
Stolperfallen, die alle drei Wege betreffen
Content Security Policy: Wenn du eine CSP-Header gesetzt hast, müssen externe Skripte und Bilder explizit erlaubt sein. Bei einem picpins-Embed gehören picpins.com in script-src und img-src (mehr Hintergrund: Embed auf statischen HTML-Seiten).
Lazy Loading: Bilder mit loading="lazy" werden erst geladen, wenn sie ins Viewport scrollen. Imagemaps können dann initial nicht funktionieren, weil die Bildgröße zum Zeitpunkt der Initialisierung null ist. Für Hotspot-Bilder besser loading="eager" oder gar kein Lazy-Attribut.
Barrierefreiheit: Egal welcher Weg — jeder klickbare Bereich braucht einen sinnvollen alt- oder title-Text, und die Bedienung muss per Tastatur möglich sein. Imagemap-Areas sind das von Haus aus, SVG-Shapes brauchen tabindex="0" und einen Keypress-Handler.
Welcher Weg passt?
Klassische Imagemap: für statische, einfache Anwendungen ohne Tooltip-Anspruch — und nur, wenn responsive nicht relevant ist.
SVG mit Hotspots: für hochwertige, dauerhafte Inhalte, in die du selbst gebaut investieren willst.
Externes Tool per Embed: für alles, was schnell gehen muss, regelmäßig geändert werden soll, mehrsprachig sein muss oder auf mehreren Webseiten parallel laufen soll.
