Efectos con Imágenes

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');">