Hotspot für TYPO3

Interaktive Bilder erklären komplexe Produkte besser als 1.000 Worte Text

Ein Gebäudeplan mit 12 markierten Räumen, ein Maschinenquerschnitt mit 8 beschrifteten Bauteilen, eine Europakarte mit 15 Standorten: All diese Anwendungsfälle brauchen klickbare Bereiche auf einem Bild. Der Besucher klickt auf ein Bauteil und sieht dessen Spezifikationen. Er klickt auf einen Standort und sieht Adresse und Kontakt. Hotspot-Extensions für TYPO3 machen Bilder interaktiv, indem sie definierte Bereiche mit Tooltips, Overlays oder Links verknüpfen.

Die spannendere Frage ist, ob man dafür überhaupt eine Extension braucht. SVG-basierte Hotspots funktionieren ohne Extension, sind leichter, barrierefreier und vollständig im Sitepackage kontrollierbar. Für einfache Anwendungsfälle ist SVG der bessere Weg. Für komplexe Setups mit vielen Hotspots und Backend-Pflege durch Redakteure rechtfertigt eine Extension den Einsatz.

Typische Einsatzszenarien

Produktbilder mit klickbaren Bauteilen. Hersteller von Maschinen, Geräten und technischen Produkten nutzen Hotspots, um Bauteile auf einem Produktfoto zu beschriften. Ein Industriekompressor mit 8 Baugruppen: Klick auf den Motor zeigt Leistungsdaten, Klick auf den Filter zeigt Wechselintervalle. Statt einer langen Textbeschreibung erschließt sich die Information visuell. Bei einem Maschinenbauer steigerten interaktive Produktbilder die Verweildauer auf Produktseiten um 45%.

Gebäude- und Campuspläne. Hochschulen, Kliniken und große Unternehmen zeigen interaktive Lagepläne: Gebäude anklicken, Etage auswählen, Rauminformationen sehen. TYPO3 liefert die Raumdaten aus einer Extbase-Datenquelle, die Hotspots sind auf dem Grundriss positioniert. Bei einem Klinikum mit 14 Gebäuden ersetzten interaktive Pläne den gedruckten Wegweiser komplett.

Infografiken mit Detailinformationen. Marketing-Abteilungen produzieren Infografiken zu Prozessen, Wertschöpfungsketten oder Unternehmensstrukturen. Statt eine statische PNG-Datei zu zeigen, werden die Elemente der Infografik klickbar: Klick auf eine Prozessstufe öffnet die Detailbeschreibung. Das funktioniert besonders gut bei komplexen Themen, die nicht linear erklärt werden können.

Technische Architektur

Hotspot-Extensions in TYPO3 bestehen aus drei Teilen: einem Backend-Editor zur Positionierung der Hotspots, einer Datenstruktur für Hotspot-Inhalte und einem Frontend-Renderer, der die Hotspots auf dem Bild darstellt.

Der Backend-Editor ist typischerweise ein visueller Punkt-Platzierungs-Editor: Der Redakteur sieht das Bild im TYPO3-Backend und klickt auf die Stellen, an denen Hotspots erscheinen sollen. Die Koordinaten werden als Prozentwerte (relativ zur Bildgröße) gespeichert, nicht als Pixel. Prozentwerte stellen sicher, dass die Hotspots bei responsiver Bilddarstellung an der richtigen Stelle bleiben.

Die Datenstruktur pro Hotspot: X-Position (%), Y-Position (%), Tooltip-Text, Detail-Content (HTML/Fluid), Icon-Typ und optional ein Link auf eine Detailseite. Die Daten werden als Inline-Relationen (IRRE) zum Content-Element gespeichert: Ein Content-Element hat 1:n Hotspots.

Im Frontend werden die Hotspots als absolut positionierte HTML-Elemente über dem Bild gerendert. Das Bild liegt in einem Container mit position: relative, die Hotspots haben position: absolute mit left und top in Prozent. Beim Klick oder Hover erscheint der Tooltip als Overlay, positioniert relativ zum Hotspot.

Die SVG-Alternative funktioniert ohne Extension: Das Bild wird als SVG angelegt (oder das Bild wird als <image> in ein SVG eingebettet), die Hotspots sind SVG-Elemente (<circle>, <rect>, <polygon>) mit data-Attributen und Event-Handlern. Die Tooltip-Inhalte werden per JavaScript aus einem <script type="application/json"> Block gelesen.

Häufige Probleme und Lösungen

Hotspot-Positionen verschieben sich auf Mobilgeräten. Das Bild wird auf dem Smartphone kleiner dargestellt, aber die Hotspots bleiben an der Desktop-Position. Ursache: Die Hotspots sind in Pixel statt in Prozent positioniert, oder der Container hat keine responsive Größenanpassung. Lösung: Alle Positionen in Prozent speichern und den Container mit max-width: 100% und height: auto responsiv machen. Zusätzlich: Hotspots auf Mobilgeräten als Liste unterhalb des Bildes anzeigen, weil Fingertipps auf kleine Hotspot-Punkte schwierig sind.

Barrierefreiheit nicht gegeben. Rein visuelle Hotspots ohne Tastatur-Navigation und ohne Screenreader-Text sind nicht barrierefrei. Lösung: Jeden Hotspot als <button> implementieren (nicht als <div>), mit aria-label für den Screenreader und tabindex für die Tastatur-Navigation. Der Tooltip-Inhalt muss als aria-describedby verknüpft sein.

Performance bei vielen Hotspots. 20+ Hotspots auf einem Bild erzeugen 20+ DOM-Elemente mit Event-Listenern. Auf älteren Mobilgeräten kann das zu Ruckeln führen. Lösung: Event Delegation statt individueller Listener. Ein einziger Listener auf dem Container statt 20 auf den Hotspots. Bei SVG-basierten Hotspots ist die Performance generell besser, weil SVG-Elemente nativ vom Browser gerendert werden.

Migration und Versions-Kompatibilität

Hotspot-Extensions im TER unterstützen TYPO3 v10 und v11. Für v12 und v13 existieren keine breit gepflegten Hotspot-Extensions. Der Trend geht zu SVG-basierten Lösungen, die als Custom Content Element im Sitepackage implementiert werden und keine Drittanbieter-Extension erfordern.

Die Migration von einer Hotspot-Extension auf eine SVG-basierte Lösung erfordert: die Hotspot-Daten (Koordinaten, Texte) exportieren, ein SVG-Template erstellen, das die Punkte als SVG-Elemente rendert, und ein Custom Content Element aufsetzen, das die Daten per IRRE-Relation verwaltet. Der Aufwand liegt bei 3-5 Tagen, abhängig von der Anzahl der Hotspot-Bilder.

Die zukunftssicherste Lösung: CSS-basierte Hotspots mit <map> und <area> für einfache Szenarien, SVG mit JavaScript für komplexe Interaktionen. Gosign implementiert interaktive Bilder als Custom Content Elements und berät zur passenden Technologie basierend auf Komplexität, Barrierefreiheits-Anforderungen und Anzahl der Hotspot-Bilder.