Interaktive Bilder aus fertigen Motiven.
Vom fertigen Motiv zur klickbaren Imagemap
Mit dem OPAL KI-Bild-Hotspots lädst du dein fertiges Kampagnen-Motiv hoch, die KI erkennt die interaktiven Bereiche, und du vergibst nur noch die Ziele. Das Ergebnis ist eine barrierefreie SVG-Imagemap – schnell und ohne technische Kenntnisse.
Was der OPAL für dich löst
KI erkennt die Bereiche: Bild hochladen – die Elemente, die klickbar sein sollen, erscheinen als vorbelegte Hotspots (Buttons, CTA-Flächen, Panels, klar abgegrenzte Objekte).
Ziele per Klick zuweisen: Jedem Hotspot ein Ziel geben – Webadresse, Produkt oder Kategorie – plus Beschriftung. Ohne HTML oder CSS.
Als SVG ausgeben: Das Ergebnis kommt als skalierbare, barrierefreie SVG-Imagemap – per VisualCMS-Widget oder direkt im Template.
Teil der OPAL-Familie
OPALe sind Bausteine von OXID eSales: eine erprobte, solide Basis, die an deine Systemlandschaft angepasst und in deinen Shop integriert werden muss.
Funktionen im Überblick
OXID
<OPAL/>
KI erkennt die interaktiven Bereiche
Gezeichnete Buttons, CTA-Flächen, beschriftete Panels und Teaser sowie abgrenzbare Objekte und Objektteile (z. B. Rad, Leuchte, Tür) werden als rechteckige Bereiche vorgeschlagen. Pro Bereich schlägt die KI eine Beschriftung in der im Bild sichtbaren Sprache vor.
Eine Analyse pro Bild – nicht pro Aufruf
Der Analyse-Versuch wird am Bild vermerkt; Reload, Tab-Wechsel oder ein Teil-Formular lösen keinen erneuten (kostenpflichtigen) KI-Aufruf aus. Eine Wiederholung passiert nur bei einem anderen Bild oder auf ausdrücklichen Wunsch.
Barrierefreie SVG-Ausgabe, überall einbindbar
Die Imagemap skaliert per SVG mit ihrem Container; jeder Bereich ist ein per Tastatur erreichbarer Link mit Textalternative (aria-label und title). Eingebunden wird sie per VisualCMS-Widget oder direkt im Template – auch ganz ohne VisualCMS. Fehlt ein verlinktes Produkt oder eine Kategorie, wird der Bereich zurückgehalten (kein Link auf gelöschte Seiten).
Bereiche direkt am Bild bearbeiten
Verschieben per Drag, Größe über die Ecke – vollständig per Tastatur bedienbar (Tab, Pfeiltasten, Entf) und mit Textfallback ohne JavaScript. Koordinaten werden als Bruchteile des Bildes gespeichert, sodass ein Bereich bei jeder Anzeigegröße seine Position behält.
Drei Ziel-Arten pro Bereich
Ein Hotspot führt zu einer Webadresse, einem Produkt oder einer Kategorie. Produkte und Kategorien wählst du aus dem Katalog – der Link bleibt auch nach dem Umbenennen gültig.
Basisbild per Upload oder Mediathek
Direkt-Upload (PNG, JPEG, WebP bis 10 MB; der Typ wird aus dem Dateiinhalt bestimmt, nicht aus dem Namen) oder – wo das Mediathek-Modul aktiv ist – Auswahl aus bereits vorhandenen Bildern.
Für wen ist der OPAL gedacht?
Shop-Betreiber / Marketing
Du hast ein fertig gestaltetes Kampagnen-Motiv oder Lookbook und möchtest einzelne Flächen darin klickbar machen – ohne Entwickler.
Was der OPAL hier konkret bringt
Du lädst das Bild hoch, die KI schlägt die interaktiven Bereiche als Hotspots vor, und du vergibst nur noch die Ziele (URL, Produkt oder Kategorie) und eine Beschriftung. Kein HTML, kein CSS, kein manuelles Aufziehen der Bereiche. Das Ergebnis ist eine skalierbare, barrierefreie SVG-Imagemap.
Häufige Fragen
Preis
35 €/Monat
OPALe sind auch in Abonnement-Paketen erhältlich.