Foros del Web » Programando para Internet » Javascript » Frameworks JS »

FADE de Imagens con MooTools

Estas en el tema de FADE de Imagens con MooTools en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/01/2012, 08:33
 
Fecha de Ingreso: noviembre-2004
Ubicación: La Paz
Mensajes: 100
Antigüedad: 19 años, 4 meses
Puntos: 0
FADE de Imagens con MooTools

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

Etiquetas: fade, funcion, js, mootools
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:04.