L'esposizione di banner è uno degli strumenti più efficaci ed utilizzati per promuovere un Website, sia come crosspromotion sia come promozione interna di alcune pagine specifiche. Attualmente non esiste sito, a parte quelli istituzionali, che non preveda uno spazio sulla pagina (solitamente nella parte superiore) per l'esposizione di banner pubblicitari.
Esistono decine di ottimi programmi per la gestione di banner a rotazione, con un'infinità di opzioni possibili: dal click-rate al numero di esposizione programmate, dall'orario di esposizione al numero complessivo di impression.
La visualizzazione di banner puo' avvenire in due modi:
- un banner differente per ogni pagina;
- banner differenti su una stessa pagina sostiuiti a distanze temporali.
La seconda soluzione da una parte genera un numero molto maggiore di banner, dall'altra impone il caricamento di un'altra immagine (il banner) quando la pagina è già stata completamente visualizzata.
Senza entrare nel merito di una scelta che sta ai curatori valutare, in questo numero della Mailing list mostriamo come ottenere un risultato simile con Javascript.
Lo script che presentiamo visualizza diversi banner a rotazione su una stessa pagina in base ai secondi preimpostati. Ad ogni banner visualizzato è possibile associare un link differente.
Il file si compone di 4 file:
- esempio.htm
- banner-0.gif
- banner-1.gif
- banner-2.gif
Per una più semplice comprensione del presente script fai continuamente riferimento al file sopracitato, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
esempio.htm
Questo file simula un normale documento ipertestuale all'interno del quale si vogliono inserire una serie di banner a rotazione con link differenti. In particolare l'esempio visualizza tre banner di dimensioni pari a 468x60.
Il codice necessario al corretto funzionamento dello script va inserito in tre punti differenti del documento: tra gli elementi <head>, nel tag <body> e nel corpo del documento.
Iniziamo con l'analisi della sintassi da inserire tra i tag <head> del documento:
<script type="text/javascript" language="javascript">
<!--
function loadpage() {
browver= parseInt(navigator.appVersion);
browtype = navigator.appName;
browsertype = "old";
if (browtype == "Netscape" && !(browver < 3)) {
browsertype = "new";
}
if (browtype == "Microsoft Internet Explorer" && !(browver < 4)) {
browsertype = "new";
}
if (browsertype == "new") {
thetimer = setTimeout("changeimage()", 3000);
banneradcode = 0;
listofimages = new Array(3);
listofimages[0] = new Image(468,60)
listofimages[0].src = "banner-0.gif"
listofimages[1] = new Image(468,60)
listofimages[1].src = "banner-1.gif"
listofimages[2] = new Image(468,60)
listofimages[2].src = "banner-2.gif"
}
}
function changeimage(){
if (browsertype == "new") {
banneradcode = banneradcode + 1
if (banneradcode == "3") {
banneradcode = 0
}
imagesource = "banner-" + banneradcode + ".gif"
window.document.bannerad.src = imagesource
thetimer = setTimeout("changeimage()", 5000);
}
else if (browsertype == "old") {
}
}
function changepage() {
if (browsertype == "new") {
if (banneradcode == 0) {
newlocation = "http://www.html.it"
}
else if (banneradcode == 1) {
newlocation = "http://www.html.it"
}
else if (banneradcode == 2) {
newlocation = "http://www.html.it"
}
location = newlocation
}
else if (browsertype == "old") {
location = "http://www.html.it"
}
}
// --></script>
La riga di codice:
thetimer = setTimeout("changeimage()", 3000);
stabilisce il numero di secondi che trascorrono tra la visualizzazione di un banner e l'altro.
Il nome e il numero delle immagini da mandare in rotazione va inserito nelle seguenti righe di codice:
listofimages = new Array(3);
listofimages[0] = new Image(468,60)
listofimages[0].src = "banner-0.gif"
listofimages[1] = new Image(468,60)
listofimages[1].src = "banner-1.gif"
listofimages[2] = new Image(468,60)
listofimages[2].src = "banner-2.gif"
Dove "new Array(3)" è il numero di immagini da mandare in rotazione (in questo caso 3) e dove per ogni banner è stabilita la grandezza in pixel "new Image(468,60)" la numerazione progressiva "listofimages[0]" e finalmente il nome del file "banner-0.gif".
È importante che alle immagini vengano assegnati nomi come quelli previsti nell'esempio. Intendiamo dire che l'ultimo carattere deve essere un numero progressivo crescente, anticipato da un segno "-".
Questo si spiega con la successiva riga di codice:
imagesource = "banner-" + banneradcode + ".gif"
Dove "banner-" è la prima parte del nome delle immagini; dove "+ banneradcode" è il numero progressivo assegnato (da 0 in avanti) e dove ".gif" è l'estensione del file.
Il numero di secondi trascorsi tra la visualizzazione dell'uno e dell'altro banner sono stabiliti da:
thetimer = setTimeout("changeimage()", 5000);
Dove "5000" sono millisecondi.
I link relativi ad ogni singolo banner sono indicati nelle righe di codice:
newlocation = "http://www.html.it"
}
else if (banneradcode == 1) {
newlocation = "http://www.html.it"
}
else if (banneradcode == 2) {
newlocation = "http://www.html.it"
Mentre il link visualizzato dai browser obsoleti che non supportano Javascript è indicato dalla successiva riga di codice:
else if (browsertype == "old") {
location = "http://www.html.it"
Impostata la sintassi tra i marcatori <head> dobbiamo inserire un riferimento alla funzione loadpage all'interno del tag <body>:
<body bgcolor="white" vlink="blue" link="blue" onload="loadpage()">
Questo accorgimento è *fondamentale* al corretto funzionamento dell'esempio.
Finalmente è necessario inserire il riferimento al banner all'interno del documento, nel punto dove si vuole visualizzare l'immagine:
<a href="javascript:changepage()">
<img src="banner-0.gif" alt="HTML.it - il sito italiano sul Web publishing" border="0" hspace=0 name="bannerad" width=468 height=60/>
</a>
Il commento all'immagine rimane fisso su:
alt="HTML.it - il sito italiano sul Web publishing"
Cosi' come gli altri attributi.
Al link viene associato la funzione "changepage" che permette di caricare gli URL impostati in precedenza.
