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 PHP:
<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/#2">Item Dos</A> </LI>
<LI><A id=3 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 muy bien JScript por favor. Gracias
08-01-2012
MooTools y FADE de Imagenes
Temas Similares
Mode Lineal
