Imagemaps und interaktive Bilder in Joomla einbauen: Editor, Module und Embed
In Joomla ist alles eine Frage des richtigen Editors. Wie du klickbare Bildbereiche per JCE, TinyMCE oder über ein Custom-Modul auf die Seite bekommst.
Joomla und HTML-Freiheit
Joomla ist seit Jahren ein zuverlässiges CMS — und es bietet mehr Freiheit beim HTML-Code als die meisten Baukästen. Genau deswegen lassen sich klickbare Bildregionen dort vergleichsweise einfach einbauen, vorausgesetzt du weißt, wo du suchen musst.
Welcher Editor ist installiert?
Joomla bringt von Haus aus den TinyMCE-Editor mit. Viele Installationen ergänzen den JCE-Editor, weil er flexibler ist. Beide unterstützen eine HTML-Quellansicht — aber sie behandeln HTML-Code unterschiedlich. JCE ist per Standard relativ tolerant und lässt Imagemap-Code stehen. TinyMCE kann eingestellte HTML-Tags filtern: Imagemap-Tags wie map und area sind in der Default-Konfiguration drin, können aber je nach Joomla-Profil verloren gehen.
Wenn dein Imagemap-Code nach dem Speichern verschwunden ist, liegt es fast immer am Editor-Filter. Im Joomla-Backend unter System → Konfiguration → Globale Konfiguration → Textfilter kannst du pro Benutzergruppe einstellen, welche Tags erlaubt sind.
Methode 1: Imagemap im Beitrags-Editor
Beitrag öffnen, im Editor auf HTML oder </> klicken (Symbol je nach Editor unterschiedlich). Imagemap-Code einfügen. Zurück zur visuellen Ansicht wechseln, speichern. Frontend prüfen.
Methode 2: Custom-HTML-Modul
Wenn das interaktive Bild nicht in einem Beitrag, sondern in einer Sidebar, Footer oder festen Position erscheinen soll, ist ein Modul vom Typ "Eigenes HTML" die richtige Wahl. Im Backend zu Inhalt → Module, neues Modul anlegen. Modultyp "Eigenes HTML" auswählen. Im Editor auf HTML-Quellansicht wechseln, Imagemap- oder Embed-Code einfügen. Position zuweisen, speichern.
Custom-HTML-Module haben eigene Filter-Einstellungen — auch hier prüfen, ob HTML-Tags durchgelassen werden.
Methode 3: Externe Tools per Embed
Wenn du dir das Filter-Geprüfe sparen willst, bindest du ein externes Tool wie picpins per Embed-Code ein. Tools dieser Art liefern dir HTML, das in einem Container läuft und nicht von Joomla-Filtern beschnitten werden muss — sofern script-Tags erlaubt sind.
Vorgehen mit picpins für Joomla: Auf picpins.com Bild hochladen, Marker und Tooltips definieren, Embed-Code kopieren. In Joomla im Beitrag oder Custom-HTML-Modul HTML-Quellansicht öffnen, Code einfügen. Falls der Code nach dem Speichern fehlt: in der Editor-Konfiguration unter "Erlaubte Elemente" sicherstellen, dass script nicht in der Verbotsliste steht.
Erweiterungen aus dem JED
Im Joomla Extensions Directory (JED) gibt es einige Spezial-Erweiterungen für Imagemaps und Hotspots. Sie sind häufig für ältere Joomla-Versionen geschrieben und werden nicht alle aktiv gepflegt. Bevor du eine Erweiterung installierst: Letzte Aktualisierung und Joomla-Versionskompatibilität prüfen — sonst kommen mit dem nächsten Joomla-Update Probleme.
SEO-Hinweis
Bei Imagemap-Bereichen lohnt es sich, sinnvolle alt-Texte und title-Attribute zu setzen. Suchmaschinen lesen diese aus, und Screenreader für Sehbehinderte sind darauf angewiesen. Bei eingebetteten Drittanbieter-Lösungen liegt der Inhalt meist in einem iFrame oder Container — der Suchmaschinen-Effekt ist dort begrenzt, dafür funktioniert die Bedienung auf Touch-Geräten zuverlässig.
