En este ejemplo podemos ver algunos efectos con imagenes realizados con Javascript. Sobre la imágen superior podemos ver efectos como un intercambio automático de imágenes, o una difuminación de la misma. En la imágen inferior podemos ver como cambia la imágen al pasar el ratón por encima de ella.
Código JavaScript
var Foto=1; //Indice a la foto actual var Fotos=2; //Numero de Imagenes a usar var timerID = null; //Variables para control del Timer var timerRunning = false; var V=100; //Variable para la opacidad var sentido=-1; var Lista_Fotos=new Array(Fotos) for (i=0; i<Fotos; i++) // Se cargan las imagenes en una tabla { Lista_Fotos[i]=new Image(); Lista_Fotos[i].src="Fish" + (i+1) + ".gif"; } function stopTimer() { //Para el reloj if(timerRunning) { clearTimeout(timerID); timerRunning = false; } } function startTimer(funcion) { // Para el reloj, si esta activo y lo arranca. stopTimer(); timerID=setTimeout(funcion,500); timerRunning = true; } function Roll_Over() { Foto++; window.document.getElementById('Imagen').src=Lista_Fotos[Foto%Fotos].src; timerID=setTimeout("Roll_Over()",500); } function Opacidad() { switch (V) { case 100: sentido = -1; break; case 0: sentido = 1; } V+=sentido; //segun sea el sentido aumenta o disminuye el valor window.document.getElementById('Imagen').style.filter = "alpha(opacity: " + V + ")"; window.document.getElementById('Imagen').style.MozOpacity=V/100.0; timerID=setTimeout("Opacidad()",50); } function Cambia_Foto(imagen) { if (window.document.getElementById(imagen).src==Lista_Fotos[0].src) window.document.getElementById(imagen).src=Lista_Fotos[1].src; else window.document.getElementById(imagen).src=Lista_Fotos[0].src; }
Código HTML
<img src="Fish1.gif" id="Imagen" alt="Imagen de prueba"> <form name="formulario1" action=""> <input class="boton" type="button" value="Difuminar" id="Transparecia" onclick="startTimer('Opacidad()');"> <input class="boton" type="button" value="RollOver" id="RollOver" onclick="startTimer('Roll_Over()');"> </form> <img src="Fish1.gif" id="Imagen2" alt="Imagen de prueba" onmouseover="Cambia_Foto('Imagen2');" onmouseout="Cambia_Foto('Imagen2');">