Rotación de banners con Javascript

  • Por
Un script Javascript para hacer que en un mismo espacio aparezcan rotando varios banner, en un intervalo de tiempo en la misma página.
Vamos a hacer un sistema de rotación de banners bien simple, programado en el lado del cliente con Javascript. En un espacio de la página se mostrará un banner y al cabo de unos segundos ese banner se cambiará por otro y luego por otro, hasta acabar con los banners disponibles, empezando luego otra vez por el primer banner. Todo ello en la misma página, sin necesidad de refrescarla.

El sistema es sencillo. Simplemente tenemos que hacer una función que se encargue de cambiar la imagen del banner actual por la imagen del banner siguiente. Además tendrá que cambiarse el enlace, pues suponemos que cada banner lleva a una página distinta.

Podemos ver el ejemplo en marcha, a fin de hacerse una idea concreta del objetivo de este ejercicio.

Lo primero que vamos a ver es el código HTML que tendremos para visualizar el banner. Es el siguiente:

<a href="http://www.salvarpatrimonio.org/"><img src="salvarpatrimonio.gif" name="banner" width=120 height=41 border=0></a>

Como se puede ver, es un simple HTML para incluir un enlace y una imagen. Tanto el atributo href del banner como el src de la imagen están definidos con el primer banner a mostrar, para que mientras se cargue la página se muestre un anuncio, en lugar de aparecer la imagen rota. Nos debemos fijar también que a la imagen le hemos puesto un atributo name="banner", que es un nombre con el que haremos referencia a la imagen más tarde en el código Javascript.

Para definir los distintos banner y las URLs a las que van dirigidos cada banner, se crearán unos arrays con las imágenes de los banner y las URLs de destino.

//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(120,41)
array_imagen[0].src = "salvarpatrimonio.gif"
array_imagen[1] = new Image(120,41)
array_imagen[1].src = "guiarte.gif"
array_imagen[2] = new Image(120,41)
array_imagen[2].src = "estiloymoda.gif"
array_imagen[3] = new Image(120,41)
array_imagen[3].src = "websitealbum.gif"

//creo el array de URLs
array_url = new Array(4)
array_url[0] = "http://www.salvarpatrimonio.org/"
array_url[1] = "http://www.guiarte.com/"
array_url[2] = "http://www.estiloymoda.com/"
array_url[3] = "http://www.websitealbum.com/"

Como hemos visto, en el array de imágenes hemos cargado una serie de objetos image, con el mismo tamaño y con sus atributos src (origen de las imágenes) distintos. Tenemos un manual que explica el tratamiento de imágenes con Javascript, que será interesante si no conocemos el objeto image y sus propiedades.

En el array de URLs hemos cargado las distintas direcciones donde se dirigiría al navegador al pinchar cada banner.

Ahora veamos la función que se encargará de:
1) Actualizar la imagen para mostrar el banner siguiente
2) Actualizar el link del banner siguiente
3) Incrementar una variable que lleva la cuenta del banner que se tiene que mostrar
4) Llamarse a si misma con un retardo, para seguir la rotación de los banner.

Por cierto, la variable que se encargará de llevar la cuenta del banner que hay que mostrar se debe definir fuera de la función, para que sea global y su valor permanezca entre las distintas llamadas a la función.

//variable para llevar la cuenta de la imagen siguiente
contador = 0

//función para rotar el banner
function alternar_banner(){
    window.document["banner"].src = array_imagen[contador].src
    window.document.links[0].href = array_url[contador]
    contador ++
    contador = contador % array_imagen.length
    setTimeout("alternar_banner()",1000)
}

El código de la función es sencillo, pero contiene la mayor complejidad de este taller.

Con la primera sentencia se indica que el atributo src la imagen llamada "banner" debe actualizarse al src del array de imágenes que toca en este momento.

Con la segunda línea, indicamos que la URL de destino del enlace debe actualizarse a la que toque en el array_url. El enlace lo tenemos que referenciar con el índice cero "0" dentro del array de links de la jerarquía de objetos del navegador, pues es el primer enlace que hay en la página. Si hubiera otros enlaces por delante en el código HTML de la página, tendríamos que cambiar el índice "0" por el número de enlace correspondiente al banner.

Para entender estas dos primeras líneas de código sería bueno conocer la jerarquía de objetos del navegador y aprender a trabajar con esta jerarquía de objetos de Javascript.

Luego incrementamos en uno la variable contador, para pasar al siguiente índice de arrays de imágenes y banners, para que en la sucesiva llamada a la función se muestre el banner siguiente. Además, a fin de que no se nos desborde la variable contador, hacemos una operación "resto de la división" entre la longitud del array de banners.

Por último, hacemos una nueva llamada a la función, pero con un retardo de 1000 milisegundos, es decir, un segundo.

Con esto estaría todo el script comentado. Sólo nos quedaría hacer la llamada a la función una vez cargada la página, para que comiencen a rotar los banner una vez se haya terminado de mostrar la página. Esto lo hacemos con el atributo onload de la etiqueta <body>

<body onload="alternar_banner()">

Ahora podemos ver el código completo de la página web:

<html>
<head>
    <title>Rotación de banners con Javascript</title>
<script>
//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(120,41)
array_imagen[0].src = "salvarpatrimonio.gif"
array_imagen[1] = new Image(120,41)
array_imagen[1].src = "guiarte.gif"
array_imagen[2] = new Image(120,41)
array_imagen[2].src = "estiloymoda.gif"
array_imagen[3] = new Image(120,41)
array_imagen[3].src = "websitealbum.gif"

//creo el array de URLs
array_url = new Array(4)
array_url[0] = "http://www.salvarpatrimonio.org/"
array_url[1] = "http://www.guiarte.com/"
array_url[2] = "http://www.estiloymoda.com/"
array_url[3] = "http://www.websitealbum.com/"

//variable para llevar la cuenta de la imagen siguiente
contador = 0

//función para rotar el banner
function alternar_banner(){
    window.document["banner"].src = array_imagen[contador].src
    window.document.links[0].href = array_url[contador]
    contador ++
    contador = contador % array_imagen.length
    setTimeout("alternar_banner()",1000)
} </script>
</head>

<body onload="alternar_banner()">

<a href="#"><img src="#" name="banner" width=120 height=41 border=0></a>

</body>
</html>


El ejemplo se puede ver en marcha en este enlace.

Referencia: Tenemos otro taller de DHTML y Javascript para rotar banners que permite utilizar todo tipo de banners, con cualquier código, como banners Flash, banners HTML, imágenes, etc.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Yofranky

12/9/2006
Hola, No entiendo xk no me funciona el script, lo probe en una pagina asp y nada, hago todo tal cual y nada ke puede estar pasando?

RESPUESTA

Si has tomado el código tal cual, debería funcionar... pero puede que tengas un error javascript o que lo tengas deshabilitado... prueba a ponerlo en una página HTML, por ejemplo bajándote el ejemplo a tu ordenador y ejecutándolo, para ver si tu navegador no tiene problemas ejecutando los scripts. Prueba con otros navegadores. Por ejemplo, con Firefox tienes la consola Javascript para ver unas descripciones de los errores javascript muy completas. Son algunas ideas.

Julian

20/9/2006
ese script es bueno, pero ahora los banners vienen hechos en flash, tienes un código o un ejemplo para rotar banners en flash? sería de gran ayuda!!!

TiNCHOY2k

13/3/2008
Para hacer funcionar este rotador de banners en PHP o ASP, el código debe ser insertado en un nuevo script (a modo de ejemplo le ponemos rota.'extensión').
Luego en la tabla donde quieran insertar la rotación de banners se debe colocar un iframe el cual haga un llamado al script 'rota'.
Ejemplo: <iframe src="rota.php" frameborder="0" height="altura de banner en pixels" width="anchura de banner en pixels" scrolling="no"></iframe>
De esa forma logré solucionar el problema en que me mostraba las imágenes pero no podía acceder a los links.

PARA QUE FUNCIONE EL CÓDIGO DEBEN SACAR LAS ''.

Espero que la info sea util.
Saludos

Nedax

20/8/2009
duda
Hola, este ultimo atributo tiene que ser llenado con todas las imagenes a rotar?...

<a href="#"><img src="#" name="banner" width=120 height=41 border=0></a>

Arthur

19/9/2009
Gracias por la aportación
Muchas gracias por la aportación, perdona mi ignorancia pero soy nuevo y no conozco nada del lenguaje php o html... hasta donde entiendo todo esta excelente.. pero para personas como yo que no saben nada y que deseamos aprender... ya que pusiste todo el proceso seria posible que pusieras con que nombres y extensiones se guarda cada instruccion... o todo va en un solo archivo. como estoy aprendiendo Joomla y para ser franco pues no se en que parte podria meter todo lo que pusiste, o debo crear un archivo y con que nombres para que se puedan enlazar... perdona si no me se explicar pero como te daras cuenta.. no se nada... por lo tanto no se hablar con los tecnisimos que los conocedores como tu... se deberia de hablar... te agradezco la gran ayuda y paciencia al compartir tus conocimientos. Gracias

Hilda

10/11/2009
como cargarlo en otra pagina
Me funciono el codigo ..solo una pregunta vez que al darle en la imagen se carga la url en esta misma pagina como le haria para que la url de la imagen abriera otra ventana y no se cargara en la misma donde estan las imagenes?....

lucho

12/4/2010
Rotacion de Banners en JavaScript
Hola : la verdad vengo estudiando sus manuales y me parecen unas herramientas de gran ayuda sobre todo para aquellas personas que por alguna razon u otra no podemos seguir una capacitacion en algun otro lugar y nos convertimos en autodidactas. Los Felicito y muchas gracias. Bueno mi pregunta: El ejemplo de Rotacion con los arrays lo encuentro claro, pero que sucede si tienes todo el script definido (imagen y URL juntos ) para que me entienda mejor adjunto este ejemplo :
<script type="text/javascript" language="javascript" src="http://www.dpbolvw.net/placeholder-4399302?&target=_top&mouseover=N"></script>
La verdad he intentado varias formas de ingresarlo en el Array pero no me funciona, ojala me pueda ayudar ayudar con esto y una vez mas muchas gracias.

OMEGAYALFA

02/6/2011
BANNER
Saludos

sabes como podemos abrilo en una nueva pestaña, la rotacion de banner con java, lo he hecho tal como dices en el tutorial y estupendo gracias llevaba meses buscando la informacion.....
de antemano gracias por las informaciones que compartes , espero la respuesta

att
alexander m

OMEGAYALFA

02/6/2011
banner
YA ESTA target="_blank" EN EL IFRAMES Y LISTO
GRACIAS POR ESTE GRAN TUTO Y POR LOS DEMAS...

ALEX

Aurelio Melchor

26/7/2011
Duda
saben que haciendo el banner en una pagina sola, o sea el puro banner funciona perfecto la rotacion de los banners y los vinculos, pero cuando lo pongo en una pagina ya existente, tengo el problema que se detiene la rotacion de las imagenes, hasta que se recarga la pagina, como puedo solucionar mi problema

ANONIMO

20/10/2011
ERROR
ME ESTOY INICIANDO Y EN PRINCIPIO A MI NO ME IBA POR EL SRC

Martha

27/4/2012
Mil gracias
Gracias

Cesar

12/3/2013
Pedir ayuda a este articulo
Hice el ejercicio aparte y funciona, cuando lo pongo en la pagina deja de funcionar los links, las imagenes rotan bien pero el link no funciona, he revisado y parece que es por los anuncios de google adsense, lo tengo en esta pagina http://cesarasilva.com/index_archivos/Page960.htm si alguien me ayuda por fa gracias

claudioh2l

03/7/2013
Agradecimiento y consulta
Genial lo probé en mi pagina web asp y me funciono perfecto, andaba buscando hace rato como generar un banner de esta manera.
Ahora me gustaría saber, como podría hacer lo mismo pero agregando un efecto entre el cambio de una imagen y otra.
Como por ejemplo, que el cambio de imagen fuese con un efecto hacia el lado.

juan

15/8/2013
Como poner 2 banner
Hola he intentado poner 2 banner pero no funciona, solo me funciona con uno.<br />
<br />
COMO PUEDO LLAMAR LOS 2 SCRIPT A MI BANNER?

juan

16/9/2013
como insertar 2 banner de estos en una sola pagina
Hola amigo.<br />
<br />
Estoy intentando usar este banner y me sirvio perfectamente, el problema viene cuando pongo otro exactamente igual pero solo funciona uno y el otro no.<br />
<br />
Como puedo hacer para que los 2 banner funcionen bien con diferentes ymagenes y urls cada uno.<br />
<br />
Gracias.

Karina

08/11/2013
ayuda con un codigo httml
hola necesito ayuda con httml para hacer esto en una pagina
, este es un ejemplo que encontre en internet en donde una iamgen se pasa sola a otra
, eso necesito , el codigo apra hacer eso. como lo puedo hacer?

esa pagina es un ejemplo de lo que quiero lograr

plissss ayudaaa
http://es.wix.com/website-template/view/html/629?originUrl=http%3A%2F%2Fes.wix.com%26number-of-page%3D2%26position-in-page%3D4