Rotacion de thumbs usando onmouseover

xcorpion · #1 (**permalink**) 21/02/2008, 13:44

Hola que tal, pues queria saber si alguin por aqui sabe de la existencia de algun script que rote los thumbs al pasar el mouse sobre una imagen, tal como se funciona youporn

JavierB · #2 (**permalink**) 21/02/2008, 14:59

Hola xcorpion

A ver si te sirve este código:

Código PHP:

  <html>
<head>
<script type="text/javascript">
imagenes = ['imagen1.jpg','imagen2.jpg','imagen3.jpg'];
num = 0;
function rotar(obj) {
  num++;
  if (num == imagenes.length) num = 0
  obj.src = imagenes[num];
}
</script>
</head>
<body>
<img src="imagen1.jpg" onmouseover = "rotar(this)" />
</body>

</html>

Saludos,

xcorpion · #3 (**permalink**) 21/02/2008, 16:31

Gracias por el codigo JavierB, solo que yo creia que alomejor ya existia algun script para hacer esto, lo unico que faltaria es hacer un time out para que siga rotando los thumbs mientras onmouseover este activo

xcorpion · #4 (**permalink**) 22/02/2008, 13:48

Me he quedado trabado, intente hacer el timeout pero no me funciona, este es el codigo:

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
imagenes = ['1.2001.jpg','2.2001.jpg','3.2001.jpg','4.2001.jpg','5.2001.jpg','6.2001.jpg','7.2001.jpg','8.2001.jpg']; 
num = 0; 
function rotar(elemid) { 
  num++; 
  if (num == imagenes.length) num = 0 
  document.getElementById(elemid).src = imagenes[num]; 
  ID=window.setTimeout("rotar('" + elemid+ "');",1000); 
} 
function detener(){ 
window.clearTimeout(ID) 
} 
</script> 
</head> 
<body> 
<img src="1.2001.jpg" id="imagen1" onmouseover = "rotar('imagen1')" onmouseout="detener()"/> 
</body> 
 
</html>

//actualizacion: ya me funciono, me faltaba los apostrofres al enviar el parametro de la funcion rotar(), actualizo el codigo

JavierB · #5 (**permalink**) 22/02/2008, 14:01

Hola de nuevo.

Prueba este código:

Código PHP:

  <html>
<head>
<script type="text/javascript">
imagenes = ['imagen1.jpg','imagen2.jpg','imagen3.jpg'];
num = 0;
var pepe;
function rotar(id) {
  obj = document.getElementById(id);
  num++;
  if (num == imagenes.length) num = 0
  obj.src = imagenes[num];
}
</script>
</head>
<body>
<img id="im" src="imagen1.jpg" onmouseover = 'pepe=setInterval("rotar(\"im\")",1000)' onmouseout="clearInterval(pepe)" />
</body>

</html>

Saludos,

xcorpion · #6 (**permalink**) 22/02/2008, 14:06

Gracias, no conocia setInterval

xcorpion · #7 (**permalink**) 23/02/2008, 18:11

Ya esta, ahora solo me gustaria precargar las imágenes para que no este relampagueando la barra de estado y el mouse, supongo que la mejor forma es utilizando

Código PHP:

  x=new Image();  
x.src="archivo.jpg";

Pero precargar todas las imagenes tal vez es mala idea, tengo unos 10 thumbs por video y de 6 a 15 videos por pagina en promedio(10x6x5Kb=300Kb), ademas de hacer pesada la pagina para el usuario resultaria en la mayoria de los casos inusable, ¿alguna sugerencia?

Estaba pensando que tal vez precargar los primeros 3 thumbs de cada video e ir cargando los restantes de cada vide que sea señalado(activado por el onmouseover)

Oscareverb · #8 (**permalink**) 26/09/2013, 07:47

Hola, he probado el código que habeis posteado y me funciona a la perfección.

Solo tengo un problema, si intento usar ese mismo código para otra thumbnail, al pasar el mouse por encima del última rota las mismas imágenes en las dos thumbnails.

Probe a renombrar esto para cada thumbnail y no funciona:
Diferentes ID
Diferentes rotate
Diferentes imagenes

Y porsupuesto estoy usando un array con diferentes imágenes para cada una.

Mi intención es usar ese efecto en todas las thumbnails de la página, alrrededor de unas 110

Por cierto, no tengo apenas idea de ningún lenguaje de programación, gracias de antemano.

Un saludo

xcorpion · #9 (**permalink**) 26/09/2013, 09:03

Hola Oscareverb.
¿Puedes mostrarnos el código Javascript que estas usando?

Oscareverb · #10 (**permalink**) 26/09/2013, 10:17

Porsupuesto.

El código lleva embebido algunos fragmentos de PHP, pero creo que no afectan al funcionamiento.

Código Javascript:

Ver original<script type="text/javascript">
        imagenes = ['<?php echo $raiz; ?>img/carpeta/carpeta/imagen1.jpg','<?php echo $raiz; ?>img/carpeta/carpeta/imagen2.jpg','<?php echo $raiz; ?>img/carpeta/carpeta/imagen3.jpg'];
        num = 0;
        function rotarImagen1(elemid) {
            num++;
            if (num == imagenes.length) num = 0
            document.getElementById(elemid).src = imagenes[num];
            ID=window.setTimeout("rotarImagen1('" + elemid+ "');",500);
        }
        function detenerImagen1(){
            window.clearTimeout(ID);
            document.getElementById('imagen1').src = "<?php echo $raiz; ?>img/carpeta/carpeta/imagen1.jpg";
        } 
</script>

Código HTML:

Ver original<img src="<?php echo $raiz; ?>img/carpeta/carpeta/imagen1.jpg" id="imagen1" onmouseover = "rotarImagen1('imagen1')" onmouseout="detenerImagen1()" alt=""/>

xcorpion · #11 (**permalink**) 26/09/2013, 10:49

Ok, podrías ponerlo así:

Código:

<script type="text/javascript">
        imagenes1 = ['<?php echo $raiz; ?>img/carpeta/carpeta1/imagen1.jpg','<?php echo $raiz; ?>img/carpeta/carpeta1/imagen2.jpg','<?php echo $raiz; ?>img/carpeta/carpeta1/imagen3.jpg'];
        imagenes2 = ['<?php echo $raiz; ?>img/carpeta/carpeta2/imagen1.jpg','<?php echo $raiz; ?>img/carpeta/carpeta2/imagen2.jpg','<?php echo $raiz; ?>img/carpeta/carpeta2/imagen3.jpg'];
        imagenes3 = ['<?php echo $raiz; ?>img/carpeta/carpeta3/imagen1.jpg','<?php echo $raiz; ?>img/carpeta/carpeta3/imagen2.jpg','<?php echo $raiz; ?>img/carpeta/carpeta3/imagen3.jpg'];
        num = 0;

        function rotarImagen(id) {
	eval("imagenes = imagenes"+id+";");
	obj = document.getElementById("imgobj"+id);
	num++;
	if (num == imagenes.length) num = 0
	obj.src = imagenes[num];

        }
        function detenerImagen(id){
            document.getElementById('imgobj'+id).src = "<?php echo $raiz; ?>img/carpeta/carpeta"+id+"/imagen1.jpg";
        } 
</script>

Código HTML:

<img src="<?php echo $raiz; ?>img/carpeta/carpeta1/imagen1.jpg" id="imgobj1" onmouseover = "interx=setInterval("rotarImagen(1)",500);" onmouseout="clearInterval(interx);detenerImagen(1)" alt=""/>
<img src="<?php echo $raiz; ?>img/carpeta/carpeta2/imagen1.jpg" id="imgobj2" onmouseover = "interx=setInterval("rotarImagen(2)",500);" onmouseout="clearInterval(interx);detenerImagen(2)" alt=""/>
<img src="<?php echo $raiz; ?>img/carpeta/carpeta3/imagen1.jpg" id="imgobj3" onmouseover = "interx=setInterval("rotarImagen(3)",500);" onmouseout="clearInterval(interx);detenerImagen(3)" alt=""/>

Oscareverb · #12 (**permalink**) 27/09/2013, 03:55

Muchas gracias por tu ayuda Xcorpion, lo probaré.