FADE de Imagens con MooTools

Deiv · #1 (**permalink**) 08/01/2012, 08:33

El Script siguiente trabajando con MOOTOOLS lo que hace es: Al posicionar el Mouse "mouseover" en cada Link la Imagen Cambia, la cuestión es que al retirar el Mouse "mouseout" se queda en la última imagen. Lo que deseo es implementar este código de tal manera que al retirar el mouse "mouseout" SIEMPRE aparezca la primera imagen. O sea necesito orientación para este Script de tal manera que funcione tal como está, pero que al retirar el mouse en mi <div> me aparezca siempre la primera imagen. No manejo JScript desde ya les digo, y viendo un poquitín el código lo que intento es implementar hacer un Menú (no es la pregunta) de tal manera que onmuseover en el Menú me muestre diferentes Imágenes de las opciones que tiene, pero si no clicko el link simplemente que vuelva a la posición donde estaba RESALTADA y con la IMAGEN correspondiente del Menú al retirar el mouse ya que me encontraré en la SubPágina determinada.

Código HTML:

<HEAD>
<SCRIPT src="/mootools.js" type=text/javascript></SCRIPT>

<SCRIPT>
window.addEvent('domready', function()
{	
	//set the default image
	activeImage = 'img1';
	activeLink = '1';
	
	//initialise the default image
	var initialise = $(activeImage).setStyles({display:'block',opacity: 0});	
	new Fx.Style(initialise, 'opacity', {duration: 1} ).set(1);
	$(activeLink).className = "active";
	
	//event listener
	$('banner-nav').getElements('a').addEvent('mouseenter', function(e) 
	{	
		new Event(e).stop();
		
		$(activeLink).className = "";
		this.className = "active";
		activeLink = this.id;
		
		var newImage = 'img'+this.id;
		
		transitionImage(activeImage,newImage);
	});
});

function transitionImage(oldImage,newImage)
{
	var fadeOut = function()
	{
		var div = $(oldImage).setStyles({
			opacity: 1
		});
		
		new Fx.Style(div, 'opacity', {duration: 700}).start(0);
		
		fadeIn();
		
	};
	
	var fadeIn = function()
	{
		
		var div2 = $(newImage).setStyles({
			display:'block',
			opacity: 0
		});
			
		new Fx.Style(div2, 'opacity', {duration: 700}).start(1);
		
	};
	
	if(newImage != activeImage)
	{
		fadeOut();
		activeImage = newImage;		
	}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id=banner-container>
<IMG id=img1 src="1.jpg"> <IMG id=img2 src="2.jpg"><IMG id=img3 src="3.jpg"> <IMG id=img4 src="4.jpg">
<DIV id=banner-nav>
<UL>
  <LI><A id=1 href="http://www.stevenyork.com/demos/banner-transitions/#1">Item Uno</A> </LI>
  <LI><A id=2 href="http://www.stevenyork.com/demos/banner-transitions/#2">Item Dos</A> </LI>
  <LI><A id=3 href="http://www.stevenyork.com/demos/banner-transitions/#3">Item Tres</A> </LI>
  <LI><A id=4 href="http://www.stevenyork.com/demos/banner-transitions/#4">Item Cuatro</A></LI>
</UL>
</DIV></DIV>
</BODY>

Para su funcionamiento deben disponer de 4 Imágenes y cualquier versión de mootools.js
Agradeceré mucho con algo de codigo de implementación, ya que no manejo JScript muy bien por favor. Gracias