Banners javascript que rotan cada x tiempo

sábado, 17 de mayo de 2008

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

Artículos relacionados


9 comentarios:

DDanny dijo...

Gracias! ahora te incluyo en el blogroll y compruebo haber si me funciona sino te aviso.

DDanny dijo...

Te explico, la primera parte es la que tengo que colocar donde vaya a poner la publicidad, ¿pero el resto del código? es decir el archivo javascript, porque que yo sepano se pueden subir a blogger archivos, ¿que lo incluyo en la plantilla de la edición de HTML?
Haber si me echas una mano. Gracias

DDanny dijo...

¡Comprobado! me funciona, lo único que no es exactamente lo que quería, aunque me sirve.
Te explico exacto lo que quería haber si puedes ayudarme, seria por ejemplo que cambiase cada minuto, pero que cada vez que volvieras a entrar en la pagina no volviera al primer banner sino al que se quedo siguiendo contabilizando el tiempo, es decir si llevaba cuarenta segundos en la pagina actualiza y a los 20 segundos pasa al segundo. Aunque me parece que esto ya seria mucho mas compiclado no?
GRacias de todas maneras por tu ayuda.

Reynier Matos Padilla dijo...

Si DDany, esto que me dices ya es relativamente más complicado porque tendríamos que utilizar una tecnología del lado del servidor, como por ejemplo PHP para poder contabilizar el tiempo y almacenarlo en alguna base de datos.

Esto se puede hacer perfectamente, pero por desgracia nuestros amigos de Blogger sólo nos permiten ejecutar en nuestros blogs código del lado del cliente como Javascript.

Si quieres lograr esto con un blog de blogger te digo que es imposible. En un hosting de pago se puede lograr utilizando PHP y MySQL para almacenar los datos, o alguna tecnología similar.

Saludos y suerte!!!
;)

DDanny dijo...

Hola, te escribo en el mismo post que dedicaste a ayudarme, si puedes y tienes tiempo te propongo un nuevo reto, ademas si me funciona te podía añadir un banner de tu pag, te explico.

Si entras a mi pagina:
elbuenkarma.blogspot.com, tienes la primera columna de la derecha "últimos post", pues la idea que tendria es realizar lo mismo pero con banners.
Hacer se tiene que poder hacer ya que se ha hecho redirigiendo a los post, estamos en contacto y gracias de antemano. Si te hiciera falta te podia enviar el javascript que uso para "ultimos post" un saludo. Cualquier cosa me dejas un comentario o un mensaje en correo.
elbuenkarma@gmail.com

DDanny dijo...

Haber si me explico mejor, no se si has entrado en mi pagina, y has visot el apartado "ultimos post", pues seria como poner un apartado en una de mis columnas con varios banners(por ejemplo 10) que roten de arriba a abajo y vayan apareciendo y desapareciendo, si entras en mi pagina lo veras claro porque es lo mismo del apartado que te dijo pero en vez de reflejarse los post seria hubicar los banners. Haber si asi me he explicado mejor.

Alex A. dijo...

Hola...
Primeramente quiero agradecerte por haber publicado el script, el cual funciona a las mil maravillas rotando de forma aleatorea...
Me preguntaba si podrias ayudarme a que el mismo rote de forma secuencial los banner...
Realmente no soy programador y he ido desarrollando mi web con lo poquito que he ido aprendiendo de personas de tan buena voluntad como tu...
De hecho, muchas gracias porque ya has sido de gran valía...
Saludos desde Panamá...

Alex´s Rodríguez
alexs@team-success.net
http://success-channel.tv

Reynier Matos Padilla dijo...

Alex:

Con unos pequeños cambios en la función mostrar_banner() se puede lograr lo que quieres.

Aquí tienes el script con los cambios necesarios para mostrar los banners de forma secuencial:

Ver código del script secuencial

Descargar código del script secuencial

Saludos y suerte!!!

Alex A. dijo...

Reynier...
Mil gracias por la información, he probado exitosamente el script.
Estoy seguro que esta información le será útil a muchas personas como yo que sin ser programadores web, tratamos de continuar mejorando nuestros sitios webs constantemente.

Mis saludos, respetos y deseos de grandes éxitos,

Alex´s A. Rodríguez Q.
www.Success-Channel.TV