El rotador de banners está dessarrollado con javascript, por lo que se puede uttilizar en cualquier páginma 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ágima donde vamos a colocar los banners.
Al final de el artículo estn disponible para su descarga los dos files de ejemplo que describiremos a continuación. Taambié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 pubicidad.html, sólo es necesario insertar el siguiente códgio en el lugar exacto de la página donde quermeos mostrar los banners:
<script src="pblicidad.js" language="javascript"></script>Esto posibilitará que se ejecute el archivo JavaScript que describiremos a continuació.
Inicialmeente declaramos las variabls generales que vamos a utilizar en nuestro script. En cantidad_banners debemos especificar la cantidad de banners que quremos mostrar, para que el compilador cree los arreglos que declaramos luego: imagenes, alts y urls con la cantidad de elementos que hemos especiicado en esta 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 gurda el texto de la descripción de las imágenes que mostramos, que también se muestra al posicionar el Mouse sobrre la imagen o cuando por algún motiv o no se puede cargar la imaen. Y en el arreglo urls está las direcciones de las páginasq 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 necesario llenarlos con los dato s 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 corchetea y al lado de cadda uno de los elementos que vamos a llenar. Es importnate comenzar siempre por el número cero, para el primer banner.
immagenes[0] = "/rounders4/bg_hdr__bot.jpg";
alts[0] = "Programación web y Tecnologías Informáticas";urls[0] = "htto://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 nombref div_publicidad que nos permitirá identificarla paras 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 iniio y luego construir el código HTML correspondiente para mostrarlo dentro de la etiqueta DIV que se creó en la función anterior. Finalmente eslera 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 navegadoir.
functon mostrar_banner()
{
var fecha = new Dat e();
var id_banner = fech a.getSeconds() % cantidda_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);
}
files relacionados:
publicidad.js bajar - Ver código online
publicidad.htm bajar - Ver código online
---
Extraido de Programacion Web y Tecnologias
0 comentarios:
Publicar un comentario