Image Map erstellen: Klickbare Bilder ohne HTML-Kenntnisse
Imagemaps galten lange als kompliziert: HTML-Code mit Koordinaten, schwer zu pflegen, kaum mobiltauglich. Wie sich heute mit wenigen Klicks vergleichbare Ergebnisse erzielen lassen.
Was ist eine Image Map?
Der Begriff stammt aus den Anfängen des Webs. Eine HTML-Imagemap besteht aus einem Bild und einer Reihe von <area>-Elementen, die einzelne Bereiche als klickbare Zonen definieren. Jeder Bereich kann auf eine andere URL zeigen. So lässt sich aus einem einzelnen Bild eine Art Menü oder eine Navigation bauen.
Klassische Anwendungsfälle waren Weltkarten mit klickbaren Ländern, Schaubilder mit verlinkten Bereichen oder Produktübersichten, in denen einzelne Komponenten zu Detailseiten führten. Funktional waren diese Lösungen mächtig — die Erstellung allerdings mühsam.
Warum sind klassische HTML-Imagemaps in der Praxis selten?
Drei Gründe: Erstens müssen die Koordinaten jedes klickbaren Bereichs in absoluten Pixeln im HTML stehen. Wer das Bild später skaliert oder austauscht, darf alles neu berechnen. Zweitens unterstützen klassische Imagemaps weder Tooltips noch Inhalte direkt im Bild — der Klick führt nur zu einer anderen URL. Drittens skalieren <area>-Elemente nicht automatisch mit, wenn das Bild responsiv kleiner wird. Auf Mobilgeräten liegen die klickbaren Zonen plötzlich an falschen Stellen, weil sie sich am Original-Pixel-Raster orientieren.
Es gibt JavaScript-Bibliotheken, die diese Probleme teilweise lösen. Sie erfordern aber Konfiguration, manuelles Eintragen von Koordinaten und meist auch ein gutes Verständnis dafür, wie der Browser Bilder rendert. Genau dieser Schritt schreckt viele ab.
Welche Alternative bietet picpins?
Statt Koordinaten zu schreiben, wird der klickbare Bereich direkt im Editor gezeichnet. Das Bild liegt vor dem Bearbeiter, und mit einem Werkzeug — Punkt, Rechteck, Ellipse oder Polygon — entsteht der Hotspot per Klick und Ziehen. Die Position wird intern prozentual gespeichert, nicht in absoluten Pixeln. Genau das ist der Schlüssel zur mobilen Tauglichkeit: Wenn das Bild im Browser auf einem kleinen Display nur 320 Pixel breit dargestellt wird, sitzen die Marker proportional an derselben Stelle wie auf dem Desktop.
Hinzu kommt: Jeder Hotspot trägt nicht nur eine URL, sondern eine ganze Inhaltsbox. Überschrift, Text, Bild, Video, Preis-Block, Button — alles direkt im Tooltip. Damit löst picpins die historische Beschränkung der HTML-Imagemap auf reine Verlinkungen auf.
Wie funktioniert das praktisch?
Nach dem Hochladen des Bilds lässt sich mit dem gewünschten Werkzeug in den Bereich klicken oder eine Form ziehen. Auf einer Weltkarte etwa ergibt das Polygon-Werkzeug Sinn, um Ländergrenzen halbwegs nachzuzeichnen. Bei einer Produktübersicht reichen Rechtecke um die einzelnen Artikel. Auf einer Hardware-Explosionsdarstellung sind kleine Punkte oft genauer als größere Flächen.
Der Tooltip-Inhalt entsteht in einem Block-Editor. Wer einfach nur einen Link setzen möchte, fügt einen Button ein und trägt die Ziel-URL ein. Wer ergänzende Informationen möchte, kombiniert mehrere Blöcke in beliebiger Reihenfolge. Sobald alles steht, erzeugt der Embed-Button den HTML-Schnipsel zur Einbindung.
Was passiert bei Änderungen am Bild?
Genau hier zeigt sich der Unterschied zur klassischen HTML-Imagemap am deutlichsten. Wird ein Bild später ausgetauscht, behält picpins die prozentualen Marker-Positionen bei. Solange der Bildausschnitt grob gleich bleibt, sitzen die Marker weiterhin korrekt. Bei größeren Änderungen lässt sich jeder Marker einzeln nachschieben — direkt im Editor mit Drag-and-Drop, ohne Code zu öffnen.
Auch das Anpassen der Texte oder Bilder im Tooltip wirkt sich sofort auf alle eingebetteten Stellen aus. Eine HTML-Imagemap, die in zehn verschiedenen Beiträgen eingebettet ist, müsste in jedem dieser Beiträge einzeln aktualisiert werden. Mit picpins liegen die Daten zentral, das Embed lädt immer die aktuelle Version.
Bleibt die HTML-Imagemap also überflüssig?
Für Spezialfälle nicht. Wer eine extrem reduzierte Lösung ohne JavaScript braucht oder in einer Umgebung arbeitet, die kein externes Skript erlaubt, kann HTML-Imagemaps weiter sinnvoll einsetzen. In allen anderen Fällen lohnt der Wechsel — vor allem wegen der einfacheren Pflege und der mobilen Tauglichkeit.
