Imagemap mit TinyMCE in Joomla

Imagemaps oder verweissensitive Grafiken bieten eine interessante Möglichkeit Hyperlinks mittels HTML-Code innerhalb einer Grafik einzubetten. Jedoch ist es nicht immer ganz einfach Impagemaps im TinyMCE, dem Standard Text Editor in Joomla!, anzulegen, da der Editor beim Speichern auf HTML-Code prüft, der nicht akzeptiert wird. Der folgende Artikel beschreibt, wie Sie den TinyMCE Text Editor in Joomla! konfigurieren müssen, damit Sie Imagemaps verwenden können.

Zuerst müssen Sie sicherstellen, dass der Editor HTML-Elemente und Attribute, die für verweissensitive Grafiken benötigt werden, akzeptiert.

Editor Plugin konfigurieren

• Gehen Sie im Backend ins Menü Erweiterungen->Plugins und öffnen Sie das TinyMCE Editor Plugin.
• Geben Sie in die winzig kleine Textarea "Erlaubte Elemente" folgendes ein: (bitte ohne Zeilenumbrüche, diese habe ich nur eingefügt, damit der Code auf die Seite passe).
  
  img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout
  |border|alt|title|hspace|vspace|width|height|align],
  map[name,id],area[alt|accesskey|coords|href|nohref|onblur|onfocus|shape|tabindex|target]
  
  Sie erreichen damit, dass das Editor-Plugin beim Speichern von Text diese HTML-Element und Attribute als valide akzepiert und nicht einfach wieder löscht.
• Stellen Sie sicher, dass im Plugin unter "Erweiterte Parameter" der Parameter "Erweiterter Bildmanager" auf "Aus" gesetzt ist.

Sollten Sie den Erweiterten Bildmanager unbedingt benötigen, dann müssen Sie eine Änderungen an der Datei plugins/editor/tinymce/tinymce.php vornehmen (siehe unten.)

Imagemap im Artikel einfügen

• Gehen Sie in den Artikel o.ä. in dem die Map eingefügt werden soll.
• Fügen Sie das Bild wie gewohnt ein.
• Wechseln Sie in den HTML-Source Code Modus
• Fügen Sie im img-Element das Attribut usemap="#mapname" ein, das auf die Map verweist (# vor dem Namen nicht vergessen, damit auf das id-Attribut der Map verwiesen wird; Ersetzen Sie "mapname" bei Bedarf mit einen eigenen Namen).
• Fügen Sie den HTML-Code für die Map ein. Wichtig ist das id-Attribut

<map id="mapname" name="mapname">
    <area coords="" href="/" shape="" />
</map>

Passen Sie "mapname" entsprechend an und setzten Sie die richtigen Werte in die Attribute des area-Elements ein.

• Übernehmen Sie diesen geänderten HTML-Code und speichern Sie den Artikel

Plugin mit "Erweiterem Bildmanager" zum Laufen bringen

Öffnen Sie die Datei plugins/editor/tinymce/tinymce.php.
Fügen Sie in Zeile 421 hinter "style" |usemap ein (innerhalb der eckigen Klammer).

Aus

if ($advimage)
{
    $plugins[]    = 'advimage';
    $elements[]    = 'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style]';
}

if ($advimage)
{
    $plugins[]    = 'advimage';
    $elements[]    = 'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style|usemap]';
}

Zur Beitragsliste