Sistema creado con Javascript para rotar todo tipo de banners en un mismo espacio en un intervalo de tiempo.
Hace poco publicamos un artículo en DesarrolloWeb.com para crear un sistema de rotación de banners por Javascript. En ese caso los banners eran necesariamente imágenes, lo que limitaba sus usos. Por ello hemos decidido mejorar un poco el sistema para que se puedan rotar todo tipo de banners, con imágenes, Flash, DHTML, etc.
Para conseguir esto hemos tenido que cambiar bastante la concepción del script para rotar banners. En este caso hemos pasado a utilizar capas y un poco de programación DHTML para mostrar u ocultar las capas de cada banner. El trabajo con capas tiene cierta complicación, pues requiere conocimientos de CSS, sobretodo los relacionados con el posicionamiento, y dominio de las técnicas de creación de código Javascript y DHTML compatible con todos los navegadores.
Para crear Cross Browser DHTML (llamamos así al código Javascript y DHTML que es compatible con todos los navegadores) tenemos un manual en DesarrolloWeb.com que explica el trabajo con un API -o librería- que dispone de funciones orientadas al trabajo con capas que funcionan correctamente en todos los clientes web más conocidos como Firefox, Internet Explorer, Opera, etc. El manual que explica todo esto se llama Taller de Cross-Browser DHTML.
El ejercicio de rotación de banners está creado pensando en que distintos banners se muestren en un mismo espacio de la página. Cada cierto tiempo el banner se cambiará por otro, pero sin recargar la página. Es decir, simplemente se mostrará un banner y luego otro, rotando en un mismo espacio, en la misma página.
Podemos ver el ejemplo en marcha para hacernos una idea exacta de nuestros objetivos.
Para hacer este ejercicio hemos creado un sistema de capas, para colocar cada banner en una capa y poder mostrarlos independientemente. Hemos creado otra capa que es un contenedor para todos los banners, de modo que podemos posicionar el contenedor en cualquier sitio y todos los anuncios se mostrarán en el lugar donde hayamos puesto el contenedor.
El código HTML de las distintas capas es el siguiente:
<div id=contenedorbanner>
<div id=bannerflash class=banner>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="468" height="60" id="sincronizacion_468x60" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://www.acensnet.com/acuerdos/desarrollo/sincronizacion_468x60.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="http://www.acensnet.com/acuerdos/desarrollo/sincronizacion_468x60.swf" quality="high" bgcolor="#ffffff" width="468" height="60" name="sincronizacion_468x60" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<div id=bannercriarweb class=banner>
<a href="http://www.criarweb.com"><img src="http://www.desarrolloweb.com/images/banners/criarwebbanner.gif" width="468" height="60" border="0" alt="Criar paginas web"></a></div>
<div id=bannermercado class=banner>
<a href="http://www.mercadoprofesional.com/"><img src="http://www.desarrolloweb.com/images/banners/adimage.gif" width="468" height="60" border="0" alt="Profesional Freelance"></a></div>
<div id=bannerpromocionwebs class=banner><a href="http://www.promocionatuweb.com/"><img src="http://www.desarrolloweb.com/images/banners/banner_promocion_de_webs.gif" width="468" height="60" border="0" alt="Promoción web"></a></div>
</div>
Se puede ver que se ha creado la capa contenedor de los banners con id=contenedorbanner. Todas las capas con los distintos banners se colocan dentro del contenedor.
Por ejemplo, el primero de los banner del contenedor lo hemos creado con id=bannerflash y además le aplicamos unos estilos comunes a todos los banners, por medio de la clase class=banner. El primer banner es Flash, por lo que dentro de la capa está el código necesario para incluir una animación Flash.
Luego se pueden ver otras tres capas dentro del contenedor de banners, con sus respectivos códigos para mostrar un anuncio. Cada capa tiene su propio nombre, por ejemplo la segunda tiene id=bannercriarweb. El nombre o identificador de la capa es indiferente, pero tenemos que tenerlo en cuenta luego para referirnos a la capa con Javascript.
Ahora veamos los estilos CSS para este código HTML.
<style type="text/css">
#contenedorbanner {width: 468px; height:60px; margin:20px;}
.banner {position:relative; left:0px; top:0px; visibility:hidden; display: none;}
</style>
Como se puede ver, se ha definido el estilo para el contenedor, colocando simplemente sus dimensiones de altura y anchura y un margen de 20 píxeles. Obviamente, los estilos del contenedor pueden variar, pues cada uno pondrá los necesarios para la página donde se utilice este sistema de rotación de banners.
Luego se ha definido una clase llamada "banner", que tiene el estilo para todas las capas de los banners. En este código vemos que la posición es relativa, para que el banner se coloque en el lugar donde se encuentra el contenedor y a una distancia de 0 píxeles arriba y a la izquierda del contenedor. También se ha definido que los banners inicialmente estén escondidos o no visibles. Además, se ha utilizado display:none para que no ocupen espacio dentro de la página. Si no estuviera el display ocurriría que los banners, aunque no se vieran en la página, tendrían un espacio reservado para ellos, de modo que cada banner aparecería debajo del otro. Así mismo, el contenedor, en lugar de tener tamaño de un banner, tendría el tamaño de todos los banners puestos uno debajo del otro. Esto es difícil de explicar, pero si no tenemos el display ocurriría algo como lo que se puede ver en este ejemplo:
El código Javascript
Una vez vistos los códigos HTML y CSS de este ejemplo, podemos pasar directamente a ver el código Javascript. Es algo bastante simple, ya que el trabajo más difícil, que es hacer código compatible con todos los navegadores, lo tenemos realizado gracias a las librerías X-Library.
En este caso hemos utilizado tres funciones de esta librería.
1) xDisplay()
Que recibe el nombre o identificador de una capa y el valor CSS que queremos aplicar a su atributo display.
2) xHide()
Que recibe el nombre de una capa y la oculta.
3) xShow()
Que recibe el nombre o identificador de una capa que se desea mostrar.
La librería se incluye con una línea de HTML que hace una llamada a un código Javascript externo.
<script src="rotar_banners.js" type="text/javascript"></script>
El archivo que contiene todas las funciones que vamos a utilizar de la librería xLibrary se llama rotar_banner.js. Lo hemos generado por medio de la aplicación X Library Compiler . Este archivo a incluir se crea para cada proyecto javascript que utiliza Cross-Browser, para que sólo incluya las funciones que realmente vamos a necesitar en nuestro caso. Más información en el artículo X Library Compiler.
El código Javascript del sistema de rotación de banners es el siguiente:
var banners = new Array(4);
banners[0] = "bannerflash";
banners[1] = "bannercriarweb";
banners[2] = "bannermercado";
banners[3] = "bannerpromocionwebs";
var i_banner = 3;
function rotar_banner(){
xDisplay(banners[i_banner], 'none')
xHide(banners[i_banner]);
i_banner ++;
i_banner = i_banner % banners.length;
xShow(banners[i_banner]);
xDisplay(banners[i_banner], 'block')
setTimeout("rotar_banner()",3000);
}
Como se puede ver, primero hemos definido un array con los identificadores de las capas donde están cada uno de los banners. Nos viene bien tenerlos en un array para poder acceder a ellos uno detrás de otro. Luego tenemos una variable llamada i_banner que guarda el índice del array del banner que deseamos mostrar. En cada iteración para mostrar el siguiente banner simplemente incrementaremos esa variable.
Luego tenemos la función rotar_banner(), que se encarga de hacer todas las operaciones para ocultar un banner y mostrar el siguiente.
Primero oculta el banner. Para ello cambia el display de la capa actual a "none", con xDisplay(), para que no ocupe espacio en la página. Luego oculta la capa con xHide(). A continuación incrementa la variable i_banner para pasar al banner siguiente. Hace una operación "%" (resto de la división) para que el índice siempre se encuentre dentro de los límites del array. Para acabar, muestra el banner siguiente, con xShow() y hace que el display sea "block" para que se pueda ver el banner en la página. El último paso es una llamada a la propia función rotar_banner(), pero con un retardo de 3.000 milisegundos, para que la rotación de banners continúe indefinidamente.
Sólo nos quedaría señalar que debemos llamar a rotar_banner() una vez cargada por completo la página, para que comience el proceso de rotación de banners.
<body onload="rotar_banner()">
Esto es todo. Con esto hemos conseguido que varios banners roten en un mismo espacio en una misma página, sin necesidad de recargarla. El ejemplo se puede ver en marcha en una página aparte.
Para conseguir esto hemos tenido que cambiar bastante la concepción del script para rotar banners. En este caso hemos pasado a utilizar capas y un poco de programación DHTML para mostrar u ocultar las capas de cada banner. El trabajo con capas tiene cierta complicación, pues requiere conocimientos de CSS, sobretodo los relacionados con el posicionamiento, y dominio de las técnicas de creación de código Javascript y DHTML compatible con todos los navegadores.
Para crear Cross Browser DHTML (llamamos así al código Javascript y DHTML que es compatible con todos los navegadores) tenemos un manual en DesarrolloWeb.com que explica el trabajo con un API -o librería- que dispone de funciones orientadas al trabajo con capas que funcionan correctamente en todos los clientes web más conocidos como Firefox, Internet Explorer, Opera, etc. El manual que explica todo esto se llama Taller de Cross-Browser DHTML.
El ejercicio de rotación de banners está creado pensando en que distintos banners se muestren en un mismo espacio de la página. Cada cierto tiempo el banner se cambiará por otro, pero sin recargar la página. Es decir, simplemente se mostrará un banner y luego otro, rotando en un mismo espacio, en la misma página.
Podemos ver el ejemplo en marcha para hacernos una idea exacta de nuestros objetivos.
Para hacer este ejercicio hemos creado un sistema de capas, para colocar cada banner en una capa y poder mostrarlos independientemente. Hemos creado otra capa que es un contenedor para todos los banners, de modo que podemos posicionar el contenedor en cualquier sitio y todos los anuncios se mostrarán en el lugar donde hayamos puesto el contenedor.
El código HTML de las distintas capas es el siguiente:
<div id=contenedorbanner>
<div id=bannerflash class=banner>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="468" height="60" id="sincronizacion_468x60" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://www.acensnet.com/acuerdos/desarrollo/sincronizacion_468x60.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="http://www.acensnet.com/acuerdos/desarrollo/sincronizacion_468x60.swf" quality="high" bgcolor="#ffffff" width="468" height="60" name="sincronizacion_468x60" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<div id=bannercriarweb class=banner>
<a href="http://www.criarweb.com"><img src="http://www.desarrolloweb.com/images/banners/criarwebbanner.gif" width="468" height="60" border="0" alt="Criar paginas web"></a></div>
<div id=bannermercado class=banner>
<a href="http://www.mercadoprofesional.com/"><img src="http://www.desarrolloweb.com/images/banners/adimage.gif" width="468" height="60" border="0" alt="Profesional Freelance"></a></div>
<div id=bannerpromocionwebs class=banner><a href="http://www.promocionatuweb.com/"><img src="http://www.desarrolloweb.com/images/banners/banner_promocion_de_webs.gif" width="468" height="60" border="0" alt="Promoción web"></a></div>
</div>
Se puede ver que se ha creado la capa contenedor de los banners con id=contenedorbanner. Todas las capas con los distintos banners se colocan dentro del contenedor.
Por ejemplo, el primero de los banner del contenedor lo hemos creado con id=bannerflash y además le aplicamos unos estilos comunes a todos los banners, por medio de la clase class=banner. El primer banner es Flash, por lo que dentro de la capa está el código necesario para incluir una animación Flash.
Luego se pueden ver otras tres capas dentro del contenedor de banners, con sus respectivos códigos para mostrar un anuncio. Cada capa tiene su propio nombre, por ejemplo la segunda tiene id=bannercriarweb. El nombre o identificador de la capa es indiferente, pero tenemos que tenerlo en cuenta luego para referirnos a la capa con Javascript.
Ahora veamos los estilos CSS para este código HTML.
<style type="text/css">
#contenedorbanner {width: 468px; height:60px; margin:20px;}
.banner {position:relative; left:0px; top:0px; visibility:hidden; display: none;}
</style>
Como se puede ver, se ha definido el estilo para el contenedor, colocando simplemente sus dimensiones de altura y anchura y un margen de 20 píxeles. Obviamente, los estilos del contenedor pueden variar, pues cada uno pondrá los necesarios para la página donde se utilice este sistema de rotación de banners.
Luego se ha definido una clase llamada "banner", que tiene el estilo para todas las capas de los banners. En este código vemos que la posición es relativa, para que el banner se coloque en el lugar donde se encuentra el contenedor y a una distancia de 0 píxeles arriba y a la izquierda del contenedor. También se ha definido que los banners inicialmente estén escondidos o no visibles. Además, se ha utilizado display:none para que no ocupen espacio dentro de la página. Si no estuviera el display ocurriría que los banners, aunque no se vieran en la página, tendrían un espacio reservado para ellos, de modo que cada banner aparecería debajo del otro. Así mismo, el contenedor, en lugar de tener tamaño de un banner, tendría el tamaño de todos los banners puestos uno debajo del otro. Esto es difícil de explicar, pero si no tenemos el display ocurriría algo como lo que se puede ver en este ejemplo:
El código Javascript
Una vez vistos los códigos HTML y CSS de este ejemplo, podemos pasar directamente a ver el código Javascript. Es algo bastante simple, ya que el trabajo más difícil, que es hacer código compatible con todos los navegadores, lo tenemos realizado gracias a las librerías X-Library.
En este caso hemos utilizado tres funciones de esta librería.
1) xDisplay()
Que recibe el nombre o identificador de una capa y el valor CSS que queremos aplicar a su atributo display.
2) xHide()
Que recibe el nombre de una capa y la oculta.
3) xShow()
Que recibe el nombre o identificador de una capa que se desea mostrar.
La librería se incluye con una línea de HTML que hace una llamada a un código Javascript externo.
<script src="rotar_banners.js" type="text/javascript"></script>
El archivo que contiene todas las funciones que vamos a utilizar de la librería xLibrary se llama rotar_banner.js. Lo hemos generado por medio de la aplicación X Library Compiler . Este archivo a incluir se crea para cada proyecto javascript que utiliza Cross-Browser, para que sólo incluya las funciones que realmente vamos a necesitar en nuestro caso. Más información en el artículo X Library Compiler.
El código Javascript del sistema de rotación de banners es el siguiente:
var banners = new Array(4);
banners[0] = "bannerflash";
banners[1] = "bannercriarweb";
banners[2] = "bannermercado";
banners[3] = "bannerpromocionwebs";
var i_banner = 3;
function rotar_banner(){
xDisplay(banners[i_banner], 'none')
xHide(banners[i_banner]);
i_banner ++;
i_banner = i_banner % banners.length;
xShow(banners[i_banner]);
xDisplay(banners[i_banner], 'block')
setTimeout("rotar_banner()",3000);
}
Como se puede ver, primero hemos definido un array con los identificadores de las capas donde están cada uno de los banners. Nos viene bien tenerlos en un array para poder acceder a ellos uno detrás de otro. Luego tenemos una variable llamada i_banner que guarda el índice del array del banner que deseamos mostrar. En cada iteración para mostrar el siguiente banner simplemente incrementaremos esa variable.
Luego tenemos la función rotar_banner(), que se encarga de hacer todas las operaciones para ocultar un banner y mostrar el siguiente.
Primero oculta el banner. Para ello cambia el display de la capa actual a "none", con xDisplay(), para que no ocupe espacio en la página. Luego oculta la capa con xHide(). A continuación incrementa la variable i_banner para pasar al banner siguiente. Hace una operación "%" (resto de la división) para que el índice siempre se encuentre dentro de los límites del array. Para acabar, muestra el banner siguiente, con xShow() y hace que el display sea "block" para que se pueda ver el banner en la página. El último paso es una llamada a la propia función rotar_banner(), pero con un retardo de 3.000 milisegundos, para que la rotación de banners continúe indefinidamente.
Sólo nos quedaría señalar que debemos llamar a rotar_banner() una vez cargada por completo la página, para que comience el proceso de rotación de banners.
<body onload="rotar_banner()">
Esto es todo. Con esto hemos conseguido que varios banners roten en un mismo espacio en una misma página, sin necesidad de recargarla. El ejemplo se puede ver en marcha en una página aparte.
| Nota: Tenemos otro artículo llamado Rotación de banners con Javascript que es muy parecido pero que te puede costar menos entenderlo y realizarlo. Es algo menos complicado. |
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...