Alternando imagenes

victorhugoa · #1 (**permalink**) 06/12/2004, 13:38

Hola a todos, mi pagina tiene una celda (112x87) la cual contiene imagen1.jpg, mi pregunta es: Cómo puedo hacer que esta imagen se remplaze por otra imágenes con un lapso de 10 segundos entre imagen (imagen2.jpg, imagen3.jpg, etc). Lo que quiero lograr es que no se "refresque" la página completa, sino solo la celda de la imágen.
Se que puede hacerse usando varias fotos en un solo gif, pero trato de que la página total sea muy ligera para cargar.

Gracias por su ayuda por adelantado.

JavierB · #2 (**permalink**) 06/12/2004, 13:54

Hola victorhugoa. Bienvenido al foro.

Este es un ejemplo para rotar 3 imágenes:

Código HTML:

<html>
<head>
<script>
var imag=1;
function cambiar() {
	imag ++;
  if(imag>3) imag=1; // cambia el 3 por el número de tus imágenes
  document.getElementById('im').src='imagen'+imag+'.gif';
}
</script>
</head>
<body onload="setInterval('cambiar()',3000)">
<table>
<tr>
<td><img id="im" src="imagen1.gif" /></td>
</tr>
</table>
</body>
</html>

Saludos,

KarlanKas · #3 (**permalink**) 06/12/2004, 13:57

Javier, cambiando de Avatar!?

Vámonos a JS!

JavierB · #4 (**permalink**) 06/12/2004, 14:03

Cita:

Iniciado por KarlanKas

Javier, cambiando de Avatar!?

Vámonos a JS!

Si. El aguilucho iba creciendo y estaba a punto de salirse de los 50x50 pixels que admite el foro, así que lo he cambiado pon un pequeño potrillo.

Saludos,

victorhugoa · #5 (**permalink**) 06/12/2004, 14:45

Muchas gracias JavierB, funciona muy bien y es sencillisimo.

JavierB · #6 (**permalink**) 07/12/2004, 04:11

Me alegro de que te haya funcionado. A mí también me gustan los códigos sencillos, cuanto más mejor

KarlanKas · #7 (**permalink**) 07/12/2004, 04:18

Permitidme sólo un pequeño apunte... muy muy muy pequeño. Simplemente es para hacer compatible el código con el mayor número posible de navegadores (antiguos). Si cambiamos esta linea:

document.getElementById('im').src='imagen'+imag+'. gif';

por esta:

document.images['im'].src='imagen'+imag+'.gif';

y esta:

<img id="im" src="imagen1.gif" />

por esta:

<img name="im" id="im" src="imagen1.gif" />

Será compatible con el prácticamente desaparecido NS 4.7 y tendremos conflictos para que se valide nuestro código como XHTML (ver) pero... qué demonios, los que usan NS4.7 tb tienen derecho a verlo, no?

Un saludo! Y perdonad la intromisión!!

Es que tenía que entrar a quitar la redirección y no he podido resistir la tentación...

JavierB · #8 (**permalink**) 07/12/2004, 04:55

Hola KarlanKas

Tomamos nota del apuntillo. Voy a ver si puedo llamar a los usuarios de NS 4.7 y animarles para que se actualicen de una vez

Intromisión perdonada y espero que se vuelva a repetir siempre que tengas algo útil que compartir con todos.

Saludos,

KarlanKas · #9 (**permalink**) 07/12/2004, 04:57

Estupendo, JavierB!

Aunque sabes que soy tan bocazas que probablemente me vuelva a entrometer cuando no tenga nada útil que decir

Un abrazo!

caricatos · #10 (**permalink**) 07/12/2004, 05:11

Hola a todos (otro "metido" en acción)

:

KarlanKas (¡Hola

!): muy buen enlace...
Particularmente suelo usar la colección de imágenes referenciadas por el atributo name, incluso cuando se informa que se eliminará algún atributo o etiqueta, los navegadores suelen hacer caso omiso, para evitar el caos de "funcionalidad" -no sé si me explico-.
No estoy del todo seguro, pero creo que se iba a eliminar también las etiquetas "img" ya que se pueden incrustar las imágenes como objetos (recuerdo haberlo probado, y funciona usando data por src y cambiando también otras cosillas... claro que unos navegadores lo aceptan y otros no)

Bueno, ya que me he metido en donde nadie me ha llamado, aprovecho para indicar que hay más formas de hacer esos cambios, aunque bastante más complejos, y como estoy siguiendo un hilo al respecto, les paso un enlace con un ejemplo: http://www.pepemolina.com/Diapositivas/_galeria.html
Las imágenes están en otra página, y lo que se ve es un iframe, en donde se realizan las transiciones (Hace tiempo abrí un hilo donde mostraba las transiciones)

Javi: buen avatar

Saludos