Interaktive Bilder in TYPO3: Reiner HTML, Imagemap-Wizard und moderne Lösungen

TYPO3 und interaktive Bilder

TYPO3 ist das CMS für Unternehmenswebseiten mit komplexen Strukturen. Genau deswegen kennt es seit Jahren spezielle Werkzeuge für interaktive Bilder — manche eingebaut, manche per Extension. Hier ist der aktuelle Stand und wie du es richtig löst.

Historie kurz erklärt

Frühere TYPO3-Versionen hatten einen Imagemap-Wizard direkt im Image-Inhaltselement. Du konntest ein Bild einfügen und auf einer kleinen Vorschau Rechtecke zeichnen, die zu Links führten. Mit TYPO3 v9 wurde das Standard-Element überarbeitet, der klassische Wizard ist nicht mehr in jeder Installation aktiviert. In aktuellen Installationen kommt die Funktionalität entweder über die Extension imagemap aus dem TYPO3-Extension-Repository oder über manuell eingegebene HTML-Maps.

Methode 1: Reiner HTML — der klassische Weg

Das Inhaltselement "Reiner HTML" erlaubt es, beliebigen HTML-Code direkt auf die Seite zu setzen. Im Backend an die Seite navigieren, an der das Bild erscheinen soll. Neues Inhaltselement → Spezielle Elemente → Reiner HTML. Im HTML-Feld den Imagemap-Code einfügen. Speichern, Frontend prüfen.

In manchen TYPO3-Setups ist das Reiner-HTML-Element für Redakteure aus Sicherheitsgründen deaktiviert. Wenn der Menüpunkt fehlt, den TYPO3-Admin um Freischaltung bitten — er kann das per Backend-User-Group-Access-List ändern.

Methode 2: Imagemap-Extension

Im Extension-Repository (TER) findest du Extensions wie imagemap oder jp_imagemap, die einen visuellen Editor in das Image-Element zurückbringen. Du legst ein normales Bild-Element an und definierst die klickbaren Bereiche per Drag-and-Drop direkt auf der Bildvorschau.

Vorgehen, sobald die Extension installiert und aktiviert ist: Inhaltselement Bild einfügen, Bild aus FAL auswählen. Im Reiter "Imagemap" oder "Hotspots" Bereiche zeichnen. Pro Bereich Link, Linktitel und optional Tooltip-Text definieren. Speichern.

Vor der Installation prüfen, ob die Extension mit deiner TYPO3-Version kompatibel ist und aktiv gepflegt wird.

Methode 3: Externe Hotspot-Tools per Embed

Bei umfangreichen Anforderungen — Tooltips mit Bildern, mehrsprachige Inhalte, häufige Updates ohne Backend-Login — ist ein externes Tool oft pragmatischer. Den Embed-Code von picpins oder ähnlichen Anbietern fügst du in ein Reiner-HTML-Element ein, fertig.

TypoScript-Konfiguration nicht vergessen

Wenn dein TYPO3-Projekt mit TypoScript-Inhalts-Output arbeitet (Stichwort tt_content.html), kann es sein, dass HTML-Inhalte ungewollt gefiltert oder umgewandelt werden. Bei Problemen einen Blick in die TypoScript-Konfiguration werfen — typischerweise config.htmlSpecialChars oder page.config.removeDefaultJS.

Performance bei TYPO3

TYPO3 cached Seiten serverseitig. Wenn du eine externe Embed-Lösung einsetzt und der Anbieter sein Skript ändert, sehen deine Besucher die neue Version sofort, weil sie clientseitig geladen wird. Inhalte aus der Imagemap-Extension werden vom TYPO3-Cache erfasst — Änderungen brauchen einen Cache-Clear.

Empfehlung

Für eine einfache Imagemap auf einer Seite: Reiner HTML reicht. Für regelmäßige Inhalte mit Tooltips: Imagemap-Extension. Für anspruchsvolle Anwendungen mit Touch-Bedienung, mehrsprachigen Inhalten und häufigen Updates: externes Tool per Embed.