| Un script Javascript para hacer que en un mismo espacio aparezcan rotando varios banner, en un intervalo de tiempo en la misma página. Vamos a hacer un sistema de rotación de banners bien simple, programado en el lado del cliente con Javascript. En un espacio de la página se mostrará un banner y al cabo de unos segundos ese banner se cambiará por otro y luego por otro, hasta acabar con los banners disponibles, empezando luego otra vez por el primer banner. Todo ello en la misma página, sin necesidad de refrescarla.
El sistema es sencillo. Simplemente tenemos que hacer una función que se encargue de cambiar la imagen del banner actual por la imagen del banner siguiente. Además tendrá que cambiarse el enlace, pues suponemos que cada banner lleva a una página distinta.
Lo primero que vamos a ver es el código HTML que tendremos para visualizar el banner. Es el siguiente:
<a href="http://www.ibm.com/"><img src="ibm.gif" name="banner" width=120 height=41 border=0></a>
Como se puede ver, es un simple HTML para incluir un enlace y una imagen. Tanto el atributo href del banner como el src de la imagen están definidos con el primer banner a mostrar, para que mientras se cargue la página se muestre un anuncio, en lugar de aparecer la imagen rota. Nos debemos fijar también que a la imagen le hemos puesto un atributo name="banner", que es un nombre con el que haremos referencia a la imagen más tarde en el código Javascript.
Para definir los distintos banner y las URLs a las que van dirigidos cada banner, se crearán unos arrays con las imágenes de los banner y las URLs de destino.
//creo array de imágenes
array_imagen = new Array(4) array_imagen[0] = new Image(120,41) array_imagen[0].src = "ibm.gif" array_imagen[1] = new Image(120,41) array_imagen[1].src = "microsoft.gif" array_imagen[2] = new Image(120,41) array_imagen[2].src = "suse.gif" array_imagen[3] = new Image(120,41) array_imagen[3].src = "linux.gif" //creo el array de URLs array_url = new Array(4) array_url[0] = "http://www.ibm..org/" array_url[1] = "http://www.microsoft.com/" array_url[2] = "http://www.suse.com/" array_url[3] = "http://www.linux.com/"
Como hemos visto, en el array de imágenes hemos cargado una serie de objetos image, con el mismo tamaño y con sus atributos src (origen de las imágenes) distintos. En el array de URLs hemos cargado las distintas direcciones donde se dirigiría al navegador al pinchar cada banner.
Ahora veamos la función que se encargará de:
1) Actualizar la imagen para mostrar el banner siguiente 2) Actualizar el link del banner siguiente 3) Incrementar una variable que lleva la cuenta del banner que se tiene que mostrar 4) Llamarse a si misma con un retardo, para seguir la rotación de los banner.
Por cierto, la variable que se encargará de llevar la cuenta del banner que hay que mostrar se debe definir fuera de la función, para que sea global y su valor permanezca entre las distintas llamadas a la función.
//variable para llevar la cuenta de la imagen siguiente
contador = 0 //función para rotar el banner function alternar_banner(){ window.document["banner"].src = array_imagen[contador].src window.document.links[0].href = array_url[contador] contador ++ contador = contador % array_imagen.length setTimeout("alternar_banner()",1000) }
El código de la función es sencillo, pero contiene la mayor complejidad de este taller.
Con la primera sentencia se indica que el atributo src la imagen llamada "banner" debe actualizarse al src del array de imágenes que toca en este momento.
Con la segunda línea, indicamos que la URL de destino del enlace debe actualizarse a la que toque en el array_url. El enlace lo tenemos que referenciar con el índice cero "0" dentro del array de links de la jerarquía de objetos del navegador, pues es el primer enlace que hay en la página. Si hubiera otros enlaces por delante en el código HTML de la página, tendríamos que cambiar el índice "0" por el número de enlace correspondiente al banner.
Luego incrementamos en uno la variable contador, para pasar al siguiente índice de arrays de imágenes y banners, para que en la sucesiva llamada a la función se muestre el banner siguiente. Además, a fin de que no se nos desborde la variable contador, hacemos una operación "resto de la división" entre la longitud del array de banners.
Por último, hacemos una nueva llamada a la función, pero con un retardo de 1000 milisegundos, es decir, un segundo.
Con esto estaría todo el script comentado. Sólo nos quedaría hacer la llamada a la función una vez cargada la página, para que comiencen a rotar los banner una vez se haya terminado de mostrar la página. Esto lo hacemos con el atributo onload de la etiqueta <body>
<body onload="alternar_banner()">
Ahora podemos ver el código completo de la página web:
<html>
<head> <title>Rotación de banners con Javascript</title> <script> //creo array de imágenes array_imagen = new Array(4) array_imagen[0] = new Image(120,41) array_imagen[0].src = "ibm.gif" array_imagen[1] = new Image(120,41) array_imagen[1].src = "microsoft.gif" array_imagen[2] = new Image(120,41) array_imagen[2].src = "suse.gif" array_imagen[3] = new Image(120,41) array_imagen[3].src = "linux.gif" //creo el array de URLs array_url = new Array(4) array_url[0] = "http://www.ibm.org/" array_url[1] = "http://www.microsoft.com/" array_url[2] = "http://www.suse.com/" array_url[3] = "http://www.linux.com/" //variable para llevar la cuenta de la imagen siguiente contador = 0 //función para rotar el banner function alternar_banner(){ window.document["banner"].src = array_imagen[contador].src window.document.links[0].href = array_url[contador] contador ++ contador = contador % array_imagen.length setTimeout("alternar_banner()",1000) } </script> </head> <body onload="alternar_banner()"> <a href="http://www.manual-de.com/#"><img src="#" name="banner" width=120 height=41 border=0></a> </body> </html> |
lunes, 13 de octubre de 2014
Rotacion de banners con Javascript
