Rotazione banner

di GDesign, 17 Marzo 2003

In questo articolo vedremo come mettere dei banner in rotazione utilizzando un semplice javascript.

Supponiamo di avere 6 banner 88x31:

e di fare in modo che ruotino su tre righe diverse.

Per essere più chiari: ad ogni apertura di pagina (o ad ogni reload) nella prima riga ruoteranno i banner 1 e 2, nella seconda riga i banner 3 e nella terza riga i banner 5 e 6. I banner si alterneranno in maniera casuale.

Vediamo adesso come procedere:
innanzitutto dobbiamo preparare tre file .js che chiameremo r1.js, r2.jse r3.js.

Ipotizzando che i banner si trovano nella cartella "ban88"il contenuto di r1.js sarà:

<!---
function choices()
{
this[0] = 2;
this[1] = "<a href=\"http://www.gdesign.it\"target=_blank\"><img src=\"ban88/1.gif\" width=88 height=31 border=0 alt=\"Gdesign\"></a>";
this[2] = "<a href=\""http://www.gdesign.it\"target=_blank\"><img src=\"ban88/2.gif\" width=88 height=31 border=0 alt=\"Gdesign\"></a>";
}
function popUpBanner(list)
{
var today = new Date();
var choiceInstance = new choices();
var Banner = choiceInstance[(today.getSeconds() % choiceInstance[0]) + 1];
}
function grabBanner()
{
var today = new Date();
var choiceInstance = new choices();
var Banner = choiceInstance[(today.getSeconds() % choiceInstance[0]) + 1];
return Banner;
}
document.writeln(grabBanner());
// FINE --->

Il contenuto di r2.js e di r3.js sarà simile; si tratterà soltanto di mettere al posto dei banner 1 e 2, i banner 3 e 4 in r2.js e i banner 5 e 6 in r3.js.

Per semplicare il tutorial i banner sono tutti linkate a gdesign.it (http://www.gdesign.it) ed hanno tutte lo stesso alt (Gdesign). È evidente che ogni immagine punterà ad un url diverso ad avrà anche un alt diverso. Ogni script può contenere tanti banner quanti ne necessitano; basterà inserire il numero dei banner da utlizzare in questa riga:

this[0] = numero banner;

Una volta che i file .js sono pronti passiamo al codice da inserire nella nostra pagina web. Per comodità utilizzeremo una tabella con 3 righe ed 1 colonna; nella prima riga faremo ruotare le immagini 1 e 2 insererendo il codice:

<script language="JavaScript" src="r1.js"></script>

nella seconda riga le immagini 3 e 4 con il codice:

<script language="JavaScript" src="r2.js"></script>

e nella terza riga le immagini 5 e 6 con il codice:

<script language="JavaScript" src="r3.js"></script>

Abbiamo finito e QUI possiamo vedere il risultato.

È necessario prestare particolare attenzione ad inserire i percorsi delle immagini e degli script in modo corretto; basta un piccolo errore nei percorsi e le immagini non saranno visualizzate.

Questo procedimento funziona anche per un numero maggiore di banner e di scritpt, ma risulta idoneo per gestire pochi banner; se abbiamo tanti banner da mettere in rotazione conviene utilizzare qualche script lato server (php o asp).

:: Pagina stampata da http://www.gdesign.it ::