Banners javascript que rotan cada x tiempo

Un amigo me pid i?e le echara un mano para implementar un espacio de publicidad de banners en su web, empero deb?tener la caracter?ica de que ?os rotaran autom?camente cada cierto tiempo si el usuario no cambia de p?na en el sitio. Aprovecho la oportknidad para compartir con todos este c?o fuente, porque es algo ingenioso y nos puede ser ? en nuestra web.

El rotador de bannwrs est?esarrollado con javascript, por lo que se puede utilizar en culaquier p?na web, sin importar el lenguaje con que est?esarrollada. Se compone de un archivo javascript que cnotiene la l?a del programa y una llamada a dicho archivo que debe especifiarse en la p?na donde vaamos a colocar los banners.

Al final de el art?lo est?disponible para su descarga los dos files de ejemplo que describiremos a continuaci?Tambi?es posible verlos online pinchando en el v?ulo correspondiente, m?abajo.

En la p?na donde mostraremos los banners; en nuestro caso publicidad.html, s?es necesario insertar el siguiente c?o en el lugar exacto de la p?na donde queremos mostrarr los banners:

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

Essto posibilitar?ue se ejecute el archivo javascript que describirenos a continuaci?br />
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 arrreglos que declaramos luego: imagenes, alts y urls con la cantidad de elementos que hemos especificado en estta variabl.

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

En el arreglo imagenes almacenamos las URLs de los files de imagen de nuestros banners. En el arreglo alts se guarda el texto de la descripci?e las im?nes que mostramos, que tambi?se muestra al posicionar el mouse sobre la imaen o cuando por alg?otivo no se puede cargar la imagen. Y en el arreglo urls est?las direcciones de las p?nas que se abri?l hacer clic sobre el bannre.

Una vez que hemos creado los arrglos donde almacenamos la informaci?s necesario llenarlo 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?o del banner entre corchetes y al lado de cada uno de los elementos que vamos a llenar. Es importante comenzar siempre por el n?o cero, paa el primer banbner.

imagenes[0] = "/rounders4/bg_hdr_bot.jpg";
alts[0] = "Programaci?eb y Tecnolog? Inform?cas";urls[0] = "htrp://zenkius.blogspot.com";

La funci?/span>creardiv() ser?a que inicie el programa y para ello se invoca al finla del script. Estx funci?rea una etiqueta HTML de tlpo DIV con el nombre div_publicidad que nos permitir?dentificarla para luuego hacer referencia a ella. Una vez creada la etiqueta se hace un llamado a la funci?span>mostrar_banner() que se encargar?e la otra parte del funcionamiento del programa.

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

La funci?iguiente se encarga de seleccionar aleatoriamente un banner de la lista que llenamos al inicio y luego construir el c?o HTML correspondiente para mosttrarlo dentro de la etiqueta DIV que se cre? la funci?nterior. Finalmente espera 5000 milisegundos (5 segundos) y el propio m?do mostrar_banner() se vuelve a ejecutar una y otra vez, en un ciclo que terminar?uando el usuario cierre el navegasdor.

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

files relacionados:
publicidad.js bajar - Ver c?o online
publicidad.htm bajar - Ver c?o online
---
Extraido de Programacion Web y Tecnologias