Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Come far ruotare i banner in un sito web

Rotazione banner

di GDesign, 17 Marzo 2003

Versione Stampabile


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

Supponiamo di avere 6 banner 88x31:


Banner 1 Banner 2
Banner 3 Banner 4
Banner 5 Banner 6

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).

^Top

Dai un voto a questo articolo:   HITS: 47 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 3