imagemap für TYPO3

imagemap macht Bilder klickbar, ohne dass Redakteure HTML anfassen müssen - die richtige Wahl für Gebäudepläne, Organigramme und Produktgrafiken mit mehreren Hotspots

Manche Inhalte lassen sich mit Worten nicht so effizient erklären wie mit einem Bild, auf dem verschiedene Bereiche angeklickt werden können. Ein Gebäudeplan, auf dem jede Abteilung zur passenden Team-Seite führt. Ein Organigramm mit Links zu den einzelnen Personenprofilen. Ein Produktbild, bei dem ein Klick auf das Rad, den Motor oder das Cockpit jeweils technische Details zeigt. HTML bringt dafür seit den neunziger Jahren die Image-Map-Funktionalität mit, aber kein Redakteur will Koordinaten per Hand in ein Textfeld eintippen. imagemap rüstet diese Funktion in TYPO3 mit einem visuellen Editor nach: Redakteure klicken im Backend auf das Bild, markieren einen Bereich und verlinken ihn auf eine Zielseite.

Das eigentliche Versprechen der Extension ist, dass räumliche Orientierung und Navigation zusammengeführt werden. Statt Besucher zwischen einer grafischen Ansicht und einer separaten Linkliste springen zu lassen, wird die Grafik selbst zum Navigationselement. Für Content, der geografisch, hierarchisch oder technisch strukturiert ist, bietet das einen deutlich intuitiveren Zugang.

Typische Einsatzszenarien

Der erste Fall sind Lagepläne und Campus-Übersichten. Kliniken, Hochschulen, Messegelände und Industrieparks arbeiten mit Übersichtskarten, auf denen einzelne Gebäude oder Bereiche direkt zu Informationsseiten verlinken. Die klassische Alternative wäre eine Liste mit Links, die aber den räumlichen Bezug verliert. imagemap kombiniert die grafische Orientierung mit der Linkstruktur.

Der zweite Anwendungsfall sind Organigramme und Hierarchien. Ein Unternehmen zeigt die Struktur seiner Abteilungen als Grafik, jeder Knoten führt zum Profil der jeweiligen Führungskraft oder zur Abteilungsseite. Für die Redaktion ist das einfacher zu pflegen als ein komplexes Tabellen-Layout mit verlinkten Zellen.

Dritter Fall: Produktgrafiken mit Feature-Hotspots. Technische Produkte - Maschinen, Fahrzeuge, Geräte - werden auf einer Explosionszeichnung oder einem Querschnitt gezeigt, auf dem die wichtigsten Komponenten per Klick erklärt werden. Das ersetzt eine lange Textliste und führt Besucher genau dorthin, wo ihr Interesse liegt.

Technische Architektur

Die klassische imagemap-Extension für TYPO3 pflegt die Koordinaten als strukturierte Datensätze in der Datenbank und rendert im Frontend ein HTML-Map-Element mit den passenden Area-Tags. Im Backend steht ein visueller Editor zur Verfügung, der das Originalbild als Auswahlfläche anzeigt und Redakteuren erlaubt, Rechtecke, Kreise oder Polygone darauf zu zeichnen. Jeder Bereich bekommt eine Ziel-URL, einen Alternativtext und optional ein Tooltip.

Die technische Herausforderung liegt in der Responsivität. Die klassische HTML-Map arbeitet mit absoluten Pixel-Koordinaten, die bei skalierten Bildern nicht mehr passen. imagemap-Extensions lösen das über JavaScript, das die Koordinaten beim Resize relativ umrechnet, oder indem sie SVG als Output-Format nutzen. SVG ist dabei die saubere Lösung: Vektor-Koordinaten skalieren von Haus aus, Ereignisbehandlung und Styling über CSS funktionieren nativ, und Screenreader können die strukturierten Elemente lesen.

Die Integration erfolgt über ein Content-Element im Page-Modul. Redakteure wählen das Ausgangsbild aus FAL, definieren die Hotspots und konfigurieren optional globale Einstellungen wie Standardfarbe der Bereiche, Hover-Effekte und Tooltip-Verhalten. Die Ausgabe lässt sich über ein Fluid-Template im Sitepackage anpassen, um CI-Konformität zu gewährleisten.

Häufige Probleme und Lösungen

Das erste Problem ist die Barrierefreiheit. HTML-Image-Maps sind für Screenreader nur dann sinnvoll lesbar, wenn jeder Area-Tag einen aussagekräftigen Alternativtext hat und die Map selbst als strukturierte Navigation erkannt wird. Viele Redakteure füllen den Alt-Text gedankenlos oder leer, was die Map für blinde Nutzer unbrauchbar macht. Die Lösung ist eine redaktionelle Pflicht, jeden Hotspot mit einem beschreibenden Alt-Text zu versehen, und eine technische Prüfung im Sitepackage, die leere Texte beim Speichern verhindert.

Zweites Problem: Mobile Bedienbarkeit. Ein Hotspot, der auf Desktop-Größe 30 mal 30 Pixel misst, ist auf einem Smartphone winzig. Die pragmatische Lösung ist eine mobile Alternative, die unterhalb eines bestimmten Breakpoints das Bild durch eine Liste mit denselben Zielen ersetzt. Das erfordert eine Fluid-Logik, die zwei Darstellungen ausspielt und per CSS umschaltet.

Drittes Problem: Pflegeaufwand bei Bild-Änderungen. Wenn das Grundbild - etwa ein Lageplan oder Produktfoto - ausgetauscht wird, müssen alle Koordinaten neu gesetzt werden, weil die Motive sich verschoben haben. Pragmatische Lösung: Redakteure arbeiten mit einem fixen, versionierten Bildformat und dokumentieren die Koordinaten-Raster, damit bei Updates nur minimale Korrekturen nötig sind. Alternativ kann eine SVG-basierte Lösung von vornherein relativ arbeiten.

Migration und Versions-Kompatibilität

Für TYPO3 v11, v12 und v13 gibt es mehrere imagemap-Extensions, die aktiv gepflegt werden, oft unter leicht abweichenden Namen. Bei Upgrades lohnt sich der Blick, ob die ursprünglich eingesetzte Extension noch weiterentwickelt wird oder ob ein Wechsel auf eine modernere Alternative sinnvoller ist. SVG-basierte Ansätze werden mittelfristig die klassischen HTML-Maps verdrängen, weil sie sowohl responsiv als auch barrierefrei besser funktionieren.

Ein praktischer Hinweis für Migrationen: Wenn ein Bestandsprojekt dutzende Imagemaps enthält, lohnt sich ein Skript, das die bestehenden Koordinaten-Datensätze ausliest und in SVG-Pfade umwandelt. Die Umstellung kann dann in einem einzigen Deployment erfolgen und die Extension abgeschaltet werden. Das reduziert die technische Schuld und macht die Grafiken zukunftsfest.

Wer heute neu startet, sollte den SVG-Ansatz bevorzugen - entweder über eine Extension mit SVG-Output oder über ein eigenes Sitepackage-Pattern, das Redakteuren einen visuellen Editor bietet und im Frontend SVG ausgibt. Gosign implementiert beide Wege und berät bei der Auswahl der passenden Architektur für das jeweilige Projekt.