Banners javascript que rotan cada x tiempo

Un amigo me pidió que le echara un mano para implementar un espacio de publicidad de banners en su web, pero debía tener la característica de que éstos rotaran automáticamente cada cierto tiempo si el usuario no cambia de página en el sitio. Aprovecho la oportunidad para compartir con todos este código fuente, porque es algo ingenioso y nos puede ser útil en nuestra web. El rotador de banners está desarrollado con javascript, por lo que se puede utilizar en cualquier página web, sin importar el lenguaje con que esté desarrollada. Se compone de un archivo javascript que contiene la lógica del programa y una llamada a dicho archivo que debe especificarse en la página donde vamos a colocar los banners. Al final de el artículo están disponible para su descarga los dos archivos de ejemplo que describiremos a continuación. También es posible verlos online pinchando en el vínculo correspondiente, más abajo. En la página donde mostraremos los banners; en nuestro caso publicidad.html, sólo es necesario insertar el siguiente código en el lugar exacto de la página donde queremos mostrar los banners:

<script src="publicidad.js" language="javascript"></script>

Esto posibilitará que se ejecute el archivo javascript que describiremos a continuación. Inicialmente declaramos las variables generales que vamos a utilizar en nuestro script. En cantidad_banners debemos especificar la cantidad de banners que queremos mostrar, para que el compilador cree los arreglos que declaramos luego: imagenes, alts y urls con la cantidad de elementos que hemos especificado en esta variable.

var cantidad_banners = 3; var imagenes = new Array(cantidad_banners); var alts = new Array(cantidad_banners); var urls = new Array(cantidad_banners);

En el arreglo imagenes almacenamos las URLs de los archivos de imagen de nuestros banners. En el arreglo alts se guarda el texto de la descripción de las imágenes que mostramos, que también se muestra al posicionar el mouse sobre la imagen o cuando por algún motivo no se puede cargar la imagen. Y en el arreglo urls están las direcciones de las páginas que se abrirá al hacer clic sobre el banner. Una vez que hemos creado los arreglos donde almacenamos la información es necesario llenarlos con los datos de cada uno de los banners que mostraremos. Debemos completarlos utilizando la siguiente estructura, teniendo en cuenta que se debe poner el número del banner entre corchetes y al lado de cada uno de los elementos que vamos a llenar. Es importante comenzar siempre por el número cero, para el primer banner.

imagenes[0] = "/rounders4/bg_hdr_bot.jpg"; alts[0] = "Programación Web y Tecnologías Informáticas";

urls[0] = "http://zenkius.blogspot.com";

La función creardiv() será la que inicie el programa y para ello se invoca al final del script. Esta función crea una etiqueta HTML de tipo DIV con el nombre div_publicidad que nos permitirá identificarla para luego hacer referencia a ella. Una vez creada la etiqueta se hace un llamado a la función mostrar_banner() que se encargará de la otra parte del funcionamiento del programa.

function creardiv() { document.writeln("<div id=\"div_publicidad\"></div>"); mostrar_banner();

}

La función siguiente se encarga de seleccionar aleatoriamente un banner de la lista que llenamos al inicio y luego construir el código HTML correspondiente para mostrarlo dentro de la etiqueta DIV que se creó en la función anterior. Finalmente espera 5000 milisegundos (5 segundos) y el propio método mostrar_banner() se vuelve a ejecutar una y otra vez, en un ciclo que terminará cuando el usuario cierre el navegador.

function mostrar_banner() { var fecha = new Date(); var id_banner = fecha.getSeconds() % cantidad_banners; document.getElementById("div_publicidad").innerHTML = "<a target=\"_blank\" href=\"" + urls[id_banner] + "\"><img src=\"" + imagenes[id_banner] + "\" border=0 alt=\"" + alts[id_banner] + "\"/></a>"; setTimeout("mostrar_banner()",5000); }

Archivos relacionados: publicidad.js Descargar - Ver código online publicidad.htm Descargar - Ver código online

Twittear

Artículos relacionados