Hoy día de reyes, Sonia en un comentario me ha hecho una petición que creo que puede ser interesante:

Te queria preguntar algo de javascript, lo llevo buscando mucho tiempo pero no lo encuentro! No se si me voy a saber explicar bien… necesito un código que en una pagina, una imagen cambie a los segundos por otra imagen del mismo tamaño pero que cada una contenga su propio link. Espero que me entiendas y espero también tu respuesta.

Pues te he entendido perfectamente y la respuesta es muy sencilla. ¡Allá vamos!
Primero necesitas crear una capa vacía y asignarle un identificador único. Después puedes modificar su contenido mediante Javascript, localizando la capa con la función document.getElementById() y modificando su contenido con la propiedad innerHTML (puede asignarle cualquier texto y ¡también código html!). Por ejemplo:

<div id="idCapita"></div>
<script>
    // Obtenemos el elemento por su identificador
    var d = document.getElementById("idCapita");
    d.innerHTML = "El contenido ha sido modificado! <img src='imagen.gif'>";
</script>

Así que sabiendo esto, ¿cual es el siguiente paso? Crear una función que se llame cada cierto tiempo y que cambie el contenido de esta capa. Por ejemplo:

<script>
	var cont = 0;
	var arr = [
		["http://www.google.com","imagen1.gif"],
		["http://www.yahoo.com","imagen2.gif"],
		["http://www.albertovilches.com","imagen3.gif"]
	]
	function cambia() {
		var d = document.getElementById("idCapita");
		cont = cont % arr.length;
		d.innerHTML = "<a href='"+arr[cont][0]+"'><img border=0 src='"+arr[cont][1]+"'></a>";
		cont++;
	}
	function inicio() {
		cambia();
		setInterval(cambia, 1000);
	}
	window.onload=inicio;
</script>
<div id="idCapita"></div>

setInterval() se encarga de llamar a una función cada cierto tiempo. El primer parámetro es el nombre de la función, en nuestro “cambia” y el siguiente el tiempo en milisegundos, por lo que 1000 sería una llamada cada segundo.
Los enlaces y las imágenes se guardan en un array y llevamos la cuenta en una variable llamada cont. Esta variable se incrementa cada vez que llamamos a la función, de manera que se utilice un elemento distinto del array.
Pero el array tiene un tamaño limitado verdad ¿y si nos pasamos? Pues para eso utilizamos un viejo truco: la operación módulo %. Esta operación hace una división entera y se queda con el resto, de manera que al dividir siempre por el tamaño del array, siempre nos dará un número comprendido entre 0 y la longitud del array.
Pruébalo y me cuentas. ¡Feliz día de reyes!

Categoría HTML/Javascript/CSS, Tecnologia
Trackback | RSS 2.0 Comentarios | Hacer comentario »
| Insertar en del.icio.us