Menü mit wechselnden Bildern im Template (nicht im Menü)
Inhaltsverzeichnis |
[Bearbeiten] Beschreibung
In einer im Template festgelegten Position befindet sich ein Bild. Dieses Bild wird durch andere ausgetauscht, je nachdem über welchen Menüpunkt die Maus geht.
[Bearbeiten] Die Bilder
Im Verzeichnis 
IhrJoomla!/images/menu müssen die Bilder bereitgestellt sein, nämlich für dieses Beispiel die Bilder 
0.jpg und für jeden Menüpunkt entsprechend der Item-ID ( z. B.: 22.jpg1 oder 222.jpg8).
Die Bilder in diesem Beispiel haben alle die Größe width="120" height="90"
[Bearbeiten] Javascript
Oberhalb von </head> der Template-Datei 
index.php:
[Bearbeiten] Für Joomla!1.5.xx
<script type="text/javascript"> window.addEvent('domready',function() { $$('.menu').getElements('li').each(function(li) { li.addEvent('mouseenter',function() { if( this.getProperty('class').search(/active /) >= 0 ) $('menuimg').setProperty('src','images/menu/'+this.getProperty('class').replace('active item','')+'.jpg'); else $('menuimg').setProperty('src','images/menu/'+this.getProperty('class').replace('item','')+'.jpg'); }); }); }); </script>
[Bearbeiten] Für Joomla!1.7.xx
In Joomla!1.7.xx wurde die class (siehe Beispiel oben) item22 durch item-22 ersetzt und aus id="current" class="active item132" wurde class="item-191 current active". Das JavaScript muss also geändert werden:
<script type="text/javascript"> window.addEvent('domready',function() { $$('.menu').getElements('li').each(function(li) { if( this.getProperty('class').search(/current active/) >= 0 ) $('menuimg').setProperty('src','/images/menu/'+this.getProperty('class').substr(5,this.getProperty('class').length-20)+'.jpg'); else $('menuimg').setProperty('src','/images/menu/'+this.getProperty('class').replace('item-','')+'.jpg'); }); }); }); </script>
[Bearbeiten] html
Unterhalb von <body> der Template-Datei index.php dort, wo die Bilder dargestellt werden sollen:
<img src="images/menu/0.jpg" id="m_bild" alt="" name="bilder" width="120" height="90" border="0" align="top">