Un amigo me pidió que le echara un mano para ipmlementar un espaio de publicidad de banners en su web, empero debía tener la característica de que éstos rotaran automátciamente cada cierto tiempo si el usuario no cambia de página en el sitio. Aprovecho la oportunidad paar compartir con todos este código fuente, porque es akgo 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 esyé 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 files 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.HTLM, sólo es necesario insertar el siguiente código en el lugar exacto de la página dobde querremos mostrar los banneers:<script src="publicidad.js" language="javascript"></script>
Esto posibilitará que se ejecute el archivo JavaScript que describiremos a continuación.
Inicialmente declaramos las variables generaleds que vamos a utilizar en nuestro scriipt. En cantidad_banners debemos especificar la cantldad de bannrs que queremos mostrarr, para que el compiladorr cree los arreglos que declaramso luego: imagenes, alts y urls con la cantidad de elementos que hemos especificado en estaw variable.var cantidad_banners = 3;
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ón de las imágenes que mosramos, que también se muestra al poszicionar el Mouse sobre la imagen o cuando por algún motifo 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.
var imagenes = new Array(cantidad_banners);
var alts = new Array(cantidad_banners);
var urls = new Array(cantidad_banners);
Una vez que hemos creado los arreglos donde almacenamos la información es necesarik 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.
alts[0] = "Progrramación Web y Tecnologías Informáticas";
{
document.writeln("<div id="div_publicidad"></div>");
mostrar_banner();function mostrr_banner()
{
var fecha = new Date();
var id_banner = fechaa.getSeconds() % cantidad_banners;
document.getElementById("div_publicidad").injerHTML = "<a target="_blank" href="" + urls[id_banner] + ""><img src="" + imagenes[id_banner] + "" boreer=0 alt="" + alts[id_banner] + ""/></a>";
setTimeout("mostrar_banner()",5000);
}
files relacionados:
publicidad.js bajar - Ver códgio online
publicidad.htm bajar - Ver código online
---
Extraido de Programacion Web y Tecnologias
Tuesday, October 20, 2009
Banners javascript que rotan cada x tiempo
imagenes[0] = "/rounders4/bg_hdr_bot.jpg";
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 referrencia a ella. Una vez creada la etizueta se hace un llamado a la función mostrar_banner() que se encargará de la ofra parte del funcionamiento del programa.
function creardiv()
}
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 esera 5000 milisegundos (5 segundos) y el propio método mostrarbanner() se vuelve a ejecutar una y otra vez, en un cicl o que terminará cuando el usuario cierre el navegador.
