Vamos a hacer un sistema de rotación de banners bien simple, programado en el lado del cliente con Javascript. Quizás llamarlo sistema de rotación de banners es demasiado, porque esos sistemas suelen ser muy sofisticados, ya que suelen incorporar utilidades de estadística, selección de banners en función de cookies y muchas otras cosas. Llamémosle un sistema para rotar imágenes que enlazan a URLs distintas.

En este taller vamos a ver el código con dos variantes, lo que te permitirá aprender muchas cosas:

• Una variante más básica y que tiene un estilo bastante "legacy" (hecho con prácticas antiguas de Javascript y manipulación del DOM)
• Una variante más moderna, con un estilo de programación más actual que tiene varias buenas prácticas de Javascript.

Empezaremos viendo la variante más básica y al final del artículo te explicaremos lo que consideramos que se podría mejorar, con código más actual, así podrás aprender diversas buenas prácticas.

En qué consiste nuestro rudimentario sistema de rotación de imágenes

En todo caso lo que vamos a mostrar es cómo crear un espacio de la página donde se mostrará un banner de tipo imagen. Al cabo de unos segundos ese banner se cambiará por otro y luego por otro, hasta acabar con los banners disponibles, empezando otra vez por el primer banner, en un proceso infinito. 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 la dirección a la que lleva el enlace, pues suponemos que cada banner lleva a una página distinta.

Código HTML para mostrar el banner

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.

En la actualidad es más frecuente acceder a los elementos que queremos manipular en el DOM a través de sus identificadores (atributo id). Sin embargo, cuando se escribió este artículo se usaba este mecanismo, habitual en las primeras versiones de Javascript. En todo caso, la práctica sigue siendo viable, funciona bien y el código será muy similar.

Creación de los datos de los banners y las urls donde nos deben llevar

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
var 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
var 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/"

Apuntamos como sugerencia que hoy usaríamos un array de literales objeto, ya que así en una misma estructura podrámos mantener tanto las imágenes como las URL, lo que sería más adecuado. También es importante mencionar que los arrays Jaascript anteriormente era obligatorio instanciarlos con un new Array() pero actualmente podríamos declararlos simplemente con un literal de corchetes vacío: var miArray = [];

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.

Creación de la función Javascript para rotar los banner

Ahora veamos la función que se encargará de realizar la rotación de los banner en la página, mediante la manipulación del DOM de la imagen que hay en el código HTML de la página.

En resumen, estos son los pasos que debe realizar esta función:

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
var contador = 0;

Realmente no haría falta que esa variable fuese global para que mantenga el valor entre las distintas llamadas a la función que alterna los banner. Podríamos usar una clousure de Javascript para conseguirlo y tendríamos un código un poco mejor, ya que aislamos el ámbito de esa variable, lo que siempre es bueno.

var 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()">

Hoy sería más habitual hacer addEventListener sobre el objeto body. Puedes aprender esa técnicoa en el artículo de asociar manejadores de eventos en Javascript.

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>

Versión en Javascript moderno de este código

Para modernizar el código y seguir las mejores prácticas actuales de Javascript, vamos a incorporar una serie de mejoras que consideramos bastante recomendables.

1. Usar let y const en lugar de var: let y const tienen un ámbito de bloque, lo que reduce la posibilidad de errores relacionados con el ámbito global y las reasignaciones accidentales.
2. Mejorar la semántica de los nombres de variables y funciones: Usar nombres descriptivos mejora la legibilidad del código, con camelCase que es lo que se suele usar en Javascript actualmente.
3. Eliminar el uso de new Image() y en su lugar definir las imágenes directamente en un array de objetos: Esto mejora la claridad y la gestión de las imágenes y URLs asociadas.
4. Eliminar el uso de la inyección de cadena en setTimeout: En lugar de pasar una cadena a setTimeout, se debe pasar una referencia a la función. Esto mejora la seguridad y la eficiencia del código.
5. Mejorar la función de rotación de banners para que sea más clara y concisa: Usando operaciones más modernas y claras para actualizar el contador y asignar las propiedades de los elementos.
6. Usar addEventListener: Es más claro y adecuado usar document.addEventListener con el evento DOMContentLoaded para asegurarnos de que el script se ejecute una vez que el DOM esté completamente cargado, sin tener que esperar a que se carguen otros recursos como imágenes o hojas de estilo.
7. Usar una clousure: Resulta bastante adecuado encapsular todo el código en una función autoinvocada para evitar contaminar el ámbito global y mantener todas las variables y funciones relacionadas dentro de un ámbito local.
8. Acceder a la imagen por el identificador: Es también más habitual realizar el acceso a la imagen por un identificador único, lo que mejora la precisión en la selección del elemento.

Son bastantes cambios pero creo que son suficientemente comprensibles. Vamos a ver el código revisado a continuación, del que esperamos puedas obtener nuevos conocimientos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Rotación de banners con Javascript</title>
    <script>
        (function() {
            // Definir banners como array de objetos con propiedades de imagen y URL
            const banners = [
                { img: "salvarpatrimonio.gif", url: "http://www.salvarpatrimonio.org/" },
                { img: "guiarte.gif", url: "http://www.guiarte.com/" },
                { img: "estiloymoda.gif", url: "http://www.estiloymoda.com/" },
                { img: "websitealbum.gif", url: "http://www.websitealbum.com/" }
            ];

            // Inicializar el contador
            let contador = 0;

            // Función para rotar el banner
            function alternarBanner() {
                const bannerImg = document.getElementById('bannerImg');
                const bannerLink = bannerImg.parentNode;

                // Actualizar imagen y URL
                bannerImg.src = banners[contador].img;
                bannerLink.href = banners[contador].url;

                // Incrementar contador de forma circular
                contador = (contador + 1) % banners.length;

                // Llamar a alternarBanner cada segundo
                setTimeout(alternarBanner, 1000);
            }

            // Añadir evento DOMContentLoaded para iniciar la rotación de banners
            document.addEventListener('DOMContentLoaded', alternarBanner);
        })();
    </script>
</head>
<body>
    <a href="#"><img id="bannerImg" src="#" width="120" height="41" border="0"></a>
</body>
</html>

Con estos cambios, el código es más seguro y eficiente, ya que encapsula las variables y funciones para evitar interferencias con otros scripts que puedan estar en la página. Además, el uso de addEventListener con DOMContentLoaded asegura que el script se ejecute en el momento óptimo.

En DesarrolloWeb se explican todos los cambios propuestos en numerosos artículos. Si quieres encontrar más información sobre cualquier tema que te interese puedes usar nuestro buscador interno.