El problema
Como sabes la animación de imágenes en las páginas web es un método muy útil para atraer la atención sobre un vínculo o sobre una parte determinada de tu sitio. Suelen ser imágenes gif, o flash, construidas con aplicaciones adecuadas. Pero a veces lo que necesitamos es demasiado simple para usar estos programas o queremos efectos que no pueden lograrse con ellos. ¿Tendrá Javascript alguna utilidad en este asunto?

La solución
Los archivos gif están muy bien para las animaciones y no digamos los flash (aunque estos últimos suelen pesar demasiado en una página). Pero también pueden lograrse animaciones con Javascript, para ello usamos un evento muy simple del objeto window, es el método setTimeout( ). Su funcionamiento es muy simple. Se le llama con dos argumentos: el nombre de una función y un número; transcurridos el número de milisegundos indicados por el argumento numérico, el explorador llama a la función que se le pasó como argumento. Si quieres que esto se repita dentro de la función llamada debes poner otro setTimeout( ). Dentro de esa función es donde se materializa la animación que consistirá en cambiar el atributo src al objeto imagen de la página que queremos animar.

Un caso práctico

En el siguietne ejemplo vemos la idea básica de este truco: primero definimos una lista con las imágenes que conforman la animación, luego definimos una función que va cambiando el origen de la imagen animada y por último llamamos a esta función con un setTimeout( ) retrasado 1 segundo.

var imgAnim = new Array()
var imgActual = -1                  //Variable global para contar las imágenes
imgAnim[0] = new Image()
imgAnim[0].src = "imagen0.gif"
imgAnim[1] = new Image()
imgAnim[1].src = "imagen1.gif"
imgAnim[2] = new Image()
imgAnim[2].src = "imagen2.gif"

function Animar()
{
imgActual++
if (imgActual >= imgAnim.length)
       imgActual = 0
document.images.imgAnimada.src = imgAnim[imgActual].src
setTimeout("Animar()",1000)
}
setTimeout("Animar()",1000)           //Primera llamada a la animación

Esto sería en cuando al Javascript. En la página se supone que habrá una imagen con atributo name = "imgAnimada"