Detener rollover multiple de imagenes al quitar cursor

viniarm · #1 (**permalink**) 12/07/2011, 12:05

Buenas. He estado todo el santo dia con este problema y no acabo con dar la solucion. Quiero hacer un rotador de imagenes, que al pasar el cursor por encima (onmouseover) vaya pasando las imagenes, pero que al quitar el cursor (onmouseout) vuelva a la imagen "principal" o a la primera imagen. Lo que he conseguido es que al pasar el cursor por encima vaya mostrando las imagenes, pero el problema esta en que no para!! al quitar el cursor sigue cambiando imagenes, al estilo banner. Tambien he conseguido que al quitar el cursor se pare y vuelva a la imagen principal, pero al pasar el cursor de nuevo se vuelve loco (vamos una chapucilla). Alguien tiene idea de como hacer para que al quitar el cursor vuelva a su imagen incial (y que luego al volverlo a poner no se vuelva loco logicamente) ??? Muchas gracias

Aqui pongo el codigo:

Código Javascript:

Ver original<html>
<head>
 
<script language="Javascript" type="text/javascript">
 
mis_imagenes = new Array("prueba3.jpg","prueba4.jpg","prueba5.jpg")
mi_imagen = 0
imgCt = mis_imagenes.length
 
function rotacion() 
{
if (document.images) 
    {
        mi_imagen++
        if (mi_imagen == imgCt) 
        {
            mi_imagen = 0
        }
        document.anuncio.src=mis_imagenes[mi_imagen]
        setTimeout("rotacion()", 1000)
    }
 
}
 
</script>
</head>
<body>
 
<a href="#" onmouseover="rotacion()"><img src="prueba2.jpg" name="anuncio" alt="Anuncios" /></a>
 
</body>
</html>

zerokilled · #2 (**permalink**) 12/07/2011, 18:37

buenas,
fijate que aún te falta programar un evento. específicamente onmouseout el cual detendrá lo hecho por onmouseover. de lo contrario, cada vez que pases por encima se irán acumulando los procesos provocando inestabilidad en el navegador. en particular, lo que debes hacer es crear otra función que se invocará en onmouseout de la imagen. pero antes, debes capturar en una variable la ejecucción programada en setTimeout. es decir, setTimeout devuelve un valor que luego te permite utilizarlo en clearTimeout para detener ese proceso programado. en la nueva función, invocas clearTimeout pasandole como valor la variable antes mencionada. adicionalmente, restaura la imagen a la inicial. probablemente querás hacer lo mismo con la variable mi_imagen para que la próxima vez la rotación inicie en el orden adecuado. un ejemplo de uso de clearTimeout, http://www.w3schools.com/jsref/met_win_cleartimeout.asp.

viniarm · #3 (**permalink**) 13/07/2011, 17:54

POR FIN!!! Exactamente lo que tu dices. Muchisimas gracias!! No sabes el tiempo que me he tirado intentando solucionar esto, un dia entero!!! Simplemente no conocia el clearTimeout(). Gracias!!