Con questo script è possibile implementare velocemente un semplice sistema di rotazione di banner. Gli ingredienti? Una serie di immagini da usare come banner, una piccola gif trasparente da 1px, il nostro script. Che si occuperà di mostrare un banner casuale al caricamento della pagina, per poi visualizzare ad intervalli regolari e personalizzabili a piacere le altre immagini.
Lo script si compone di una sezione JavaScript, e di un richiamo all'interno delle pagine Web.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
La sezione Javascript è composta da poche righe di codice contenute nella sezione <head> </head> della pagina:
<script type="text/javascript" language="javascript">
<!-- Nasconde lo script ai vecchi browser
adImages = new Array("banner1.gif","banner2.gif","banner3.gif")
imgCt = adImages.length
prima = true
function rotazione() {
if (document.images) {
if (prima) {
aggiungi = Math.floor((Math.random() * imgCt))
prima = false
}
else {
aggiungi++
if (aggiungi == imgCt) {
aggiungi = 0
}
}
document.banner.src=adImages[aggiungi]
setTimeout("rotazione()", 3 * 1000)
}
}
// Fine -->
</script>
Lo script inizia con la definizione di un array che contiene il riferimento alle immagini/banner da far ruotare. Nell'esempio si presume che siano contenute all'interno della stessa directory in cui risiede la pagina:
adImages = new Array("banner1.gif","banner2.gif","banner3.gif")
Alla variabile 'imgCt' si assegna come valore la lunghezza del nostro array:
imgCt = adImages.length
Infine, impostiamo il valore della variabile 'primà il valore 'truè. Ci servirà per impostare la visualizzazione casuale del primo banner all'apertura della pagina:
prima = true
Quindi, si crea la funzione rotazione(), quella che gestirà la visualizzazione dei banner. Lo script mostrerà all'inizio un'immagine casuale:
if (prima) {
aggiungi = Math.floor((Math.random() * imgCt))
prima = false
}
Quindi, a partire da quella, visualizza in ordine crescente le altre. In pratica, se ad essere visualizzata per prima è banner2.gif, seguirà banner3.gif, e quindi banner1.gif. E così via. Ma come avviene la sostituzione? Lo script cerca nel documento un'immagine chiamata 'banner' e imposta l'attributo 'src' con i valori contenuti nel nostro array:
document.banner.src=adImages[aggiungi]
Concludiamo con la parte relativa all'intervallo temporale tra i banner:
setTimeout("rotazione()", 3 * 1000)
Nell'esempio il cambio avviene ogni 3 secondi, calcolati però in millisecondi (3 * 1000). Per aumentare il tempo basterà aumentare il valore 3.
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Il richiamo dello script nella pagina web avviene innanzitutto a livello del tag <body>. Qui inseriamo un evento 'onload' con cui eseguiamo la funzione 'rotazione()' al caricamento della pagina:
<body onload="rotazione()">
L'ultima nota riguarda l'immagine di base. Abbiamo detto sopra che lo script sostituisce l'immagine in base al nome di una sorta di segnaposto presente nella pagina. il nome di questa immagine/segnaposto è 'banner', cos' definito nel codice HTML:
<img src="spacer.gif" width="468" height="60" name="banner"
alt="Ad Banner">
Da notare che trattandosi di un segnaposto, si può usare in partenza una semplice gif trasparente da 1px, contenuta all'interno dello zip.
