Interaktive Bilder in Wix: Hover-Boxen, Hotspots und HTML-Embeds
Wix bietet eigene Werkzeuge für klickbare Bildbereiche. Wo sie reichen, wo nicht, und wie du mit dem HTML-Embed-Element jede Lösung einbauen kannst.
Was Wix von Haus aus mitbringt
Wix ist als Drag-and-Drop-Baukasten gebaut — vieles geht ohne Code. Wenn du aber ein Bild brauchst, auf dem mehrere Bereiche klickbar sind und Tooltips erscheinen, stößt du an die Grenzen des Editors. Hier sind die realistischen Optionen.
Option 1: Hover-Box mit absolut positionierten Elementen
Wix kennt das Konzept einer Hover-Box. Du kannst über ein Bild andere Elemente legen — etwa transparente Buttons mit eigenen Hover-Effekten. Das ist im Grunde eine Imagemap, gebaut mit Wix-Bordmitteln.
Vorgehen: Bild auf die Seite ziehen, Position fixieren. Über das Bild transparente Buttons oder leere Boxen platzieren — eine pro klickbarem Bereich. Jeden Button mit einem Link versehen oder per "Lightbox öffnen" mit einem Detail-Popup verbinden. Bei Bedarf Hover-Effekte definieren.
Das funktioniert solide, hat aber einen Haken: Wix-Layouts sind nicht hundertprozentig responsive. Wenn du nicht vorsichtig arbeitest, verschiebt sich auf der mobilen Ansicht alles. Wix bietet einen separaten Mobile-Editor, in dem du die Buttons noch einmal manuell positionieren kannst.
Option 2: Pro Gallery mit Click-to-Action
Die Pro Gallery ist Wix' fortgeschrittenes Galerie-Element. Sie unterstützt Beschreibungen, Click-Aktionen und kann ein Lightbox-Popup öffnen. Wenn dein Anwendungsfall ist, ein Bild zu zeigen und beim Klick Detailinformationen einzublenden — ohne mehrere klickbare Regionen — reicht die Pro Gallery oft aus.
Was sie nicht kann: mehrere unabhängige Hotspots auf demselben Bild mit jeweils eigenem Tooltip. Dafür brauchst du die Hover-Box-Methode oder einen externen Embed.
Option 3: HTML-Embed-Element
Hier wird es flexibel. Wix erlaubt es, beliebigen HTML-Code in einem dedizierten Element einzubetten. Im Editor links auf "+ Hinzufügen" klicken, "Einbetten → HTML einbetten" wählen und das Element auf die Seite ziehen. Auf das Element klicken, "Code eingeben" wählen, dann HTML-Imagemap, ein iFrame oder einen Embed-Code einfügen.
Das Embed-Element lädt den Inhalt in einem iFrame. Bei Tools wie picpins, die mit responsivem aspect-ratio arbeiten, klappt es gut, weil sie die Größe selbst aushandeln.
Option 4: Externe Tools per Embed
Wenn du regelmäßig interaktive Bilder einbaust, lohnt sich ein dediziertes Tool wie picpins. Du erstellst das interaktive Bild dort, kopierst den Embed-Code, fügst ihn ins Wix-HTML-Embed-Element ein. Vorteil: Tooltips, Hover-Effekte und mehrere Ansichten desselben Bildes sind out of the box dabei und automatisch responsive.
Was du wissen solltest
Wix erlaubt nur einen Embed pro HTML-Element. Wenn du mehrere interaktive Bilder auf einer Seite haben willst, brauchst du mehrere HTML-Embed-Elemente. Außerdem: Im freien Wix-Tarif ist HTML-Embedding eingeschränkt — du brauchst mindestens den Combo-Plan, damit das HTML-Element verlässlich funktioniert.
Mobile-First denken
Touch-Bedienung verzeiht keine 20-Pixel-Hotspots. Plane deine klickbaren Bereiche mit mindestens 44 Pixel Kantenlänge — das ist die Empfehlung von Apple und Google für Touch-Targets. Sonst frustriert die mobile Version mehr, als sie hilft.
