Mootools - Hintegrundgrafik mit smoothen Wechsel bei Hover

[josDesign]

Hallo!

Ich habe eine UL/LI Menü in welchen ich auch eine Hover-Backgroundgrafik erstellt habe. Ich hatte anfangs vor das ganze über fx.styles zu machen.

        window.addEvent('domready', function(){
  //-MOUSEOVER-Mootools
var list = $$('div#hauptmenu ul li');
list.each(function(element) {
 
	var fx = new Fx.Styles(element, {duration:200, wait:false});
 
	element.addEvent('mouseenter', function(){
		fx.start({
			'margin-left': 0,
			'background': 'red',
			'color': '#fff'

		});
	});
 
	element.addEvent('mouseleave', function(){
		fx.start({
			'margin-left': 0,
			'background': 'transparent',
			'color': '#fff'
		});
	});
 
});





        });

Dann habe ich auf einem Forum das hier entdeckt:

// 			$('myElement').setStyle('background-image', bilder/hauptmenu_hover.png);

Hier der Beitrag: http://forum.mootools.net/viewtopic.php?pid=40070


Ich habe leider nicht viel Schimmer von dem ganzen - mich würde interessieren wie ich auch solch einen weichen Fader zu dieser Hintergrundgrafik bekommen kann.

Vielen Dank im Voraus,
jos

 

[lay-z-cow]

Hi,

das geht nicht so einfach.
Wenn das gehen soll, brauchst du zwei Ebenen - Bild1 und Bild2 - dann machst du einen fx mit opacity zu 1 bei dem einen und opacity zu 0 bei dem anderen.
Aber du brauchst zwei Ebenen, da JS nicht einfach zwei Bilder umrechnen kann.

Canvas kann das allerdings - nur falls zu nach Alternativen suchst.

gruß

.:lay-z-cow:.