Interaktive Bilder in WordPress einfügen: Imagemap, Hotspots und moderne Alternativen
Drei Wege, ein Bild in WordPress klickbar zu machen — von der klassischen HTML-Imagemap über Plugins bis hin zu Embed-Lösungen wie picpins. Inklusive Vor- und Nachteilen.
Warum reicht ein einfaches Bild manchmal nicht aus?
Ein Produktbild zeigt mehrere Details auf einmal. Eine Karte hat verschiedene Regionen. Ein Schaubild erklärt einen Zusammenhang. In allen drei Fällen reicht ein statisches Bild oft nicht — Besucher sollen auf einzelne Bereiche klicken oder mit der Maus darüber fahren können, um mehr zu erfahren. In WordPress gibt es dafür drei sinnvolle Wege.
Weg 1: Die klassische HTML-Imagemap
HTML kennt seit den 90ern das Element <map>. Damit definierst du Bereiche auf einem Bild, die als Link funktionieren. Die Technik ist alt, funktioniert aber zuverlässig — auch ohne Plugins, ohne JavaScript und ohne externe Services.
So gehst du vor: Lade dein Bild über die Mediathek hoch und merke dir die exakte URL. Bestimme dann die Pixelkoordinaten der klickbaren Bereiche. Tools wie image-map.net generieren den passenden Imagemap-Code, indem du direkt im Browser auf dem Bild Rechtecke, Kreise oder Polygone zeichnest. Anschließend fügst du im Beitrag oder auf der Seite einen Custom-HTML-Block ein und setzt den Code hinein.
Was gut funktioniert: keine Abhängigkeit, kein Plugin, sehr schnell. Was nicht gut funktioniert: Imagemaps skalieren nicht responsive. Auf dem Smartphone sind die definierten Bereiche an den falschen Stellen, weil das Bild kleiner gerendert wird als die Koordinaten erwarten. Es gibt JavaScript-Bibliotheken wie image-map-resizer, die das nachträglich korrigieren — schöner ist es, gleich auf eine moderne Lösung zu setzen.
Weg 2: Spezialisierte Plugins
Im WordPress-Plugin-Verzeichnis findest du eine Handvoll Anbieter für interaktive Bilder. Spezialisierte Hotspot-Plugins bieten Editoren mit Drag-and-Drop, Tooltips und Animationen. Sie haben den Vorteil, dass sie tief mit WordPress integriert sind und du den Editor direkt im Backend nutzt.
Der Nachteil: Jedes weitere Plugin erhöht die Ladezeit, kann mit anderen Plugins kollidieren und muss bei jedem WordPress-Update mitziehen. Vor der Installation lohnt sich ein Blick auf die letzte Aktualisierung und auf die Bewertungen.
Weg 3: Externe Embed-Tools wie picpins
Eine dritte Option ist, das interaktive Bild außerhalb von WordPress zu erstellen und nur einen kleinen Embed-Code einzufügen. Das hat zwei Vorteile: Die WordPress-Installation bleibt schlank, und du kannst dasselbe Bild parallel auf anderen Plattformen nutzen — Shopify, Webflow, eine PDF-Landingpage, völlig egal wo.
Der Ablauf mit picpins für WordPress sieht so aus: Bild auf picpins.com hochladen, Marker setzen, Tooltips mit Text, Bildern oder Buttons befüllen. Projekt veröffentlichen, Embed-Code kopieren. In WordPress wieder einen Custom-HTML-Block einfügen, Code reinsetzen, speichern. Der eingebettete Inhalt passt sich responsive an, funktioniert auf Touch-Geräten und lässt sich später ändern, ohne dass du den WordPress-Beitrag erneut bearbeiten musst.
Welcher Weg lohnt für dich?
Wenn du eine einmalige, einfache Imagemap brauchst und kein zusätzliches Tool willst — die klassische HTML-Lösung reicht. Für regelmäßige interaktive Bilder mit Tooltips, Bildern in den Tooltips oder mehreren Ansichten desselben Motivs ist ein dediziertes Tool die nüchterne Wahl. Plugins lohnen sich, wenn alles innerhalb von WordPress bleiben muss; Embed-Tools, wenn du Plattform-übergreifend dasselbe Bild nutzen willst.
Stolperfalle: Caching
Wenn das eingebundene Bild nach dem Speichern nicht erscheint oder nur teilweise lädt: WP Rocket, W3 Total Cache und ähnliche Plugins cachen aggressiv. Nach dem Einbinden einmal den Cache leeren, dann erscheint die Änderung sofort.
