Thema: ImageMap mit TinyMCE

Hallo allerseits,

der erste Beitrag und direkt ein Howto.
Ich habe auf zahlreichen Beiträgen und englischen JoomlaForen mich durchgekämpft und wollte deshalb mal zur Allgemeinheit führen das ImageMaps einfach zu erstellen sind mit TinyMCE und ohne mosCE und LegacyMode wie so manche es versuchen.


Eine Imagemap, ein Bild mit Shapes zu versehen welche bei Mouseover wechseln und per Klick zu einer neuen Seite führen ohne das Bild in 1000 Einzelsegmente zu zerteilen, ist eigentlich keine neue Herausforderung. Jedoch bereitet Joomla da so manchen ein Kopfzerbrechen.


Schritt 1. TinyMCE
Wichtig ist im Backend > Plugins > TinyMCE : das automatische code cleanen zu deaktivieren (sonst wird der code beim einfügen direkt wieder zerlegt)

Schritt 2. Die Map erstellen
Imagemap bedeutet: Grundbild / Shapes / Mouseover-out Bild / Link
D.h. legt euch ein Bild an und das Bild nochmals mit dem Effekt der beim überfahren eines Bereichs kommen soll

Schritt 3. Freeware/Dreamweaver
Nun erstellt euch eine Imagemap, die einfachste Variante ist es per Webinterface hierrüber zu machen: IMAGEMAPcreator

Oder das Ganze per Dreamweaver oder ähnliche Programme einem Bild die Polygone zuweisen.

Code einfügen
Beitrag öffnen > HTML code: Nun müsst ihr den folgenden Code so umschreiben das er wie folgt aussieht

Code:

   
<div id="imgmapdiv">  
     <map name="imgmap">  
          <area href="#" shape="poly" coords="251,134,171,234,191,251"
onmouseover="document.images[0].src='images/deinMouseOverBild.gif" onmouseout="document.images[0].src='images/deinMouseOutBild.gif'" mce_href="DeinLink" alt="2">  
        </map>  
  </div>  
   <p>  
       <img src="images/deinGrundBild.gif" mce_src="images/deinGrundBild.gif" alt="Move mouse over image" usemap="#imgmap"></p>

Speichern und fertig wär die Imagemap mt einem Bereich, natürlich kann man beliebig viele Bereiche auf dem Bild definieren.

Da ich kein Programmierspezialist bin wär ich für Ergänzungen dankbar.
Ein PopUp bei Mouseover oder eine Lightbox bei Klick zu integrieren wär intressant.

Danke und ich hoffe ich konnte einigen lästiges suchen ersparen.

danke mitchell,
das automatische code cleanen hat mich schon öfter genervt. ich wusste bis eben nicht, dass man das abstellen kann!

Hallo,
um eine Lightbox in eine Imagemap zu integrieren, musst man in der lightbox.css (wenn man Lightbox 2 benutzen möchte)in Zeile 216

Code:

        if ((imageLink.rel == 'lightbox')){

in

Code:

        if (Element.readAttribute($(imageLink), "rel")){

abändern.
Dann in der Imagemap im area tag einfach rel="lightbox" einfügen und es sollte funktionieren.
Fynn