Banners aleatorios con JavaScript

Ya vimos como realizar rotación de banners con ASP, pero para los que no cuentan con un servidor que soporte ese lenguaje, aquí le mostramos como hacerlo con JavaScript.

Funcionamiento

Básicamente, el JavaScript guarda en la variable ad un número del 1 al 3 (dependiendo de cuantos banners queramos poner). Y luego mediante una sentencia para comparar (if) comprueba si el valor de esa variable es igual a 1, 2 o 3. Dependiendo del número, va a crear nuevas variables (txt, url, alt, banner, width, y height) con los valores de cada banner. Una vez obtenido todos los valores escribe (mediante document.write) código html con las variables en los lugares que correspondan.

El siguiente script debe ser colocado en cualquier parte de la página donde queremos mostrar los banners:

<SCRIPT LANGUAGE=”JavaScript”>
<!– Begin
var how_many_ads = 3;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
txt=”Ingrese al web de Banner1″;
url=”http://www.banner1.com”;
alt=”Banner1.com”;
banner=”images/banner1.gif”;
width=”468″;
height=”60″;
}
if (ad==2) {
txt=”Ingrese al web de Banner2″;
url=”http://www.banner2.com”;
alt=”Banner2.com”;
banner=”images/banner2.gif”;
width=”468″;
height=”60″;
}
if (ad==3) {
txt=”Ingrese al web de Banner3″;
url=”http://www.banner3.com”;
alt=”Banner3.com”;
banner=”images/banner3.gif”;
width=”468″;
height=”60″;
}
document.write(‘<center>’);
document.write(‘<a href=”‘ + url + ‘” target=”_blank”>’);
document.write(‘<img src=”‘ + banner + ‘” width=’)
document.write(width + ‘ height=’ + height + ‘ ‘);
document.write(‘alt=”‘ + alt + ‘” border=0><br>’);
document.write(‘<small>’ + txt + ‘</small></a>’);
document.write(‘</center>’);
// End –>
</SCRIPT>

Especificaciones

TXT: es un texto que aparece debajo del banner
URL: la dirección proporcionada por MercadoLibre para linkear el banner
ALT: el texto que aparece al ubicar el mouse sobre la imagen
BANNER: la url del banner
WIDTH y HEIGTH: las medidas del banner (468×60, 120×60, etc.).

Ejemplo del script funcionando

Deja un comentario