efecto galeria imagenes onmouseover

edu007ar · #1 (**permalink**) 25/05/2012, 10:18

Hola, vuelvo a molestar porque estoy buscando un efecto que cambie una imagen por otras en forma secuencial mientras el mouse este onmouseover.

Es decir, mientras el mouse esta sobre una imagen que esta vaya cambiando cada segundo por otras imagenes de una lista y que vuelva a comenzar tipo bucle, pero que se frene cuando se quita el mouse de la imagen.

Intenté con este codigo que funciona perfecto pero no logro que se frene el efecto cuando salgo de la imagen, lo sigue haciendo indefinidamente.

Código:

<script>
function cambiar()
{
	var images = [
	 "002-1.jpg",
	 "003-1.jpg"
	 ];

	var counter = 0;
	setInterval(function() {
	$('#imagen').attr('src', images[counter]);
	 counter++;
	 if (counter == images.length) {
		 counter = 0;
	 }
	}, 1000);

}
}
</script>

<img src="001-1.jpg" id="imagen" onmouseover="javascript:cambiar();">

Para complicarlo un poco estaria bueno que la lista de imagenes esté en la llamada a la función, porque la idea es que haya muchas imagenes que hagan ese efecto mientras el mouse este posicionado arriba.

Gracias por cualquier ayuda!

Slds.

#2 (**permalink**) 31/05/2012, 03:11

Todo es sencillo con jquery

Código Javascript:

Ver originalvar cambiar = function(images){
    var counter = 0;
    setTimeout(function() {
        $('#imagen').attr('src', images[counter]);
        counter++;
        if (counter == images.length) {
         counter = 0;
        }
    }, 1000);
};
 
$('#imagen').hover(
    function(){ // Mouse en imagen
    var images = [
     "002-1.jpg",
     "003-1.jpg"
     ];
         cambiar(images);
    },
    function(){ // Mouse fuera de imagen
        clearTimeout(); // Cancela el setTimeout
    }
);

Hay mejores maneras de hacer lo que haces, pero bueno, al cliente lo que pida

alejandrodecelis · #3 (**permalink**) 07/07/2012, 07:28

Hola danneg,
muchas gracias por poner el codigo en jquery para hacer la galeria. Yo tengo que hacer lo mismo para una pagina. Una serie de imagenes que, cuando el cursor se ponga encima de una imagen, cualquiera, empiecen a aparecer imagenes,volviendose al principio y asi sucesivamente. Cuando se quite el raton, debe de volver a la imagen original.

Soy bastante novato en jquery y, tras un buen rato mirando foros y manuales, no he logrado echar a andar este efecto de rollover multiple, si se podria llamar asi :). Cuando pones en el codigo javascript lo siguiente:

'#imagen'

esto hace referencia al id de la imagen que se ponga en el <body></body>?
Yo tengo puesto en mi body el siguiente fragmento de codigo:

<img src="images/foto1.jpg" alt="imagen" id="imagen" class="imagen" width="200" height="200"/>

pero no se si asi se podria activar el evento hecho con jquery. No consigo hacerlo andar :S

Agradeceria enormemente tu ayuda :)

Un saludo y disculpas si he cometido muchos errores jejeje

#4 (**permalink**) 02/08/2012, 15:45

Hola, pues el mismo codigo que esta arriba te funciona perfectamente.

Te recuerdo que jQuery utiliza los mismos selectores que usa CSS, así que cuando llamas #imagen, esta obviamente llama a la imagen con id imagen (recuerda que el id es unico, si necesitas mas imágenes con este efecto, utiliza class. ej .imagen).

Código Javascript:

Ver originalvar cambiar = function(images){ //En el parametro se pasan las imagenes que mostrara
    var counter = 0; //Indica que inicia desde la primera imagen
    setTimeout(function() { //Inicia un temporizador
        $('#imagen').attr('src', images[counter]); //cambia la imagen segun el valor de counter
        counter++; //Suma uno a counter para cambiar las imagenes
        if (counter == images.length) { //Si counter es mas grande al numero de imagenes que tienes...
         counter = 0; //Regresas a la primera
        }
    }, 1000); //Repetir esto cada 10 segundos
},
imgoriginal = $('#imagen').attr('src'); //Guarda imagen original
 
$('#imagen').hover( //Evento hover
    function(){ // Mouse en imagen
        var images = [ //Imagenes que se mosttraran
             "002-1.jpg",
             "003-1.jpg"
         ];
         cambiar(images);
    },
    function(){ // Mouse fuera de imagen
        clearTimeout(); // Cancela el setTimeout
        $('#imagen').attr('src', imgoriginal); //Regresa a imagen original
    }
);