Ich habe mir hierzu ein moo_hoverimage.tpl geschrieben was ich ins Seitenlayout einbinde.
Soll ein Bild ausgetauscht werde gebe ich im Inhaltselement (oder wo auch immer) die Klasse "hoverImg" an.
Das Javascript versucht dann ein Bild aus dem selben Ordner zu laden mit dem zusatz "Over".
Bsp:
tl_files/bilder/normalesBild.jpg --> tl_files/bilder/normalesBildOver.jpg
moo_hoverimage.tpl:
PHP-Code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready',function(){
$$("div.hoverImg img, img.hoverImg").each(function(el){
el.store('default',el.get('src'));
el.addEvents({
'mouseenter':function(e){
var over = el.retrieve('default').substr(0,el.retrieve('default').lastIndexOf('.'))
+ 'Over'
+ el.retrieve('default').substr(el.retrieve('default').lastIndexOf('.'));
el.set('src',over);
},
'mouseleave':function(e){
el.set('src',el.retrieve('default'));
}
});
});
});
//--><!]]>
</script>
Lesezeichen