Chi è solito frequentare siti Web stranieri, avrà certamente notato una massiccia presenza di banner pubblicitari. Attualmente tale strumento rappresenta lo standard di diffusione pubblicitaria in Rete anche nel nostro paese.
La gestione di banner pubblicitari viene di regola gestita da programmi automatizzati residenti su server. Molto spesso si tratta di programmi complessi e costosi che il grosso dell'utenza domestica o aziendale non puo' permettersi. Esistono programmi CGI per Unix soprattutto, ma anche per NT, che gestiscono banner a rotazione, ma devono comunque essere configurati e non tutti hanno la possibilità di accedere alla CGI-bin del proprio server.
Per dare una soluzione a queste complesse problematiche, abbiamo deciso di analizzare un Javascript per la generazione di banner a rotazione associati a link differenti.
Questo esempio si rivolge, quindi, agli sviluppatori che vogliono riempire uno spazio predefinito sulla pagina Web con un banner+link diverso ad ogni apertura della stessa. In altre parole, ogni utente che accederà a quel documento si troverà di fronte ad un banner differente da quello visualizzato dal visitatore immediatamente precedente o successivo.
L'esempio si compone di 5 file:
- esempio.htm
- script.js
- banner01.gif
- banner02.gif
- banner03.gif
La sintassi Javascript è inserita all'interno di un file esterno con estensione .js
Questa soluzione ha il vantaggio di allegerire la pagina html, e di rendere la gestione dello script più semplice e ordinata. Ma il vantaggio più grande è nel caso in cui lo script venga inserito in più pagine. In questo caso infatti, se si vuole modificare il link ad un banner, non sarà necessario agire su tutti i documenti che contengono il riferimento allo script esterno, ma solo sul file "script.js". Questo file, essendo richiamato da tutte le pagine del sito, le modificherà automaticamente.
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Ovviamente, ai banner dimostrativi previsti in questo esempio, vanno sostituiti quelli che vuoi inserire nel tuo sito. Abbiamo adottato le misure standard di 468x60 pixel.
script.js
Il file esterno .js gestisce lo script e si compone della seguente sintassi:
function choices()
{
this[0] = 3;
this[1] = "<a href="http://www.html.it"><img src="banner01.gif"
width=468 height=60 border=1 alt="Primo banner"/></a>";
this[2] = "<a href="http://www.html.it"><img src="banner02.gif"
width=468 height=60 border=1 alt="Secondo banner"/></a>";
this[3] = "<a href="http://www.html.it"><img src="banner03.gif"
width=468 height=60 border=1 alt="Terzo banner"/></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());
La parte che a noi interessa è la prima, dove vanno inseriti i riferimenti alle immagini e agli URL da visualizzare. Ma andiamo con ordine.
Il codice:
this[0] = 3;
è di FONDAMENTALE IMPORTANZA per il corretto funzionamento dello script. Il valore "3", infatti, indica il numero TOTALE di banner che si vogliono mandare in rotazione. Nel nostro esempio le immagini sono tre (banner01.gif, banner02.gif e banner03.gif). Se ne volessimo aggiungere un'altra, il valore aumenterebbe a "4" e cosi' via. Non esistono limiti al numero di banner da inserire.
Le righe successive indicano l'immagine e il link corrispondente da visualizzare random ad ogni apertura di pagina o reload. Prendiamo in considerazione l'immagine "banner01.gif":
this[1] = "<a href="http://www.html.it"><img src="banner01.gif" width=468 height=60 border=1 alt="Primo banner"></a>";
Le regole da seguire sono molto semplici. I normali riferimenti HTML alle immagini ed agli altri tag vanno inseriti all'interno delle parentesi con apici doppi "". L'unica differenza con HTML standard è che in questo caso bisogno inserire un segno "" ad ogni apertura e chiusura di Tag che prevede le virgolette ad apici doppi. Quindi sia il riferimento al link, che all'immagine, che al commento della stessa, devono essere preceduti e seguiti da un segno "".
Per fare un esempio il tag <br> non ha necessità di tale segno, mentre un eventuale tag <APPLET CODE="html.class"> andrebbe modificato in <APPLET CODE="html.class">
Impostando gli altri banner, segui la numerazione progressiva [1], [2], [3]
Questo è un semplicissimo file htm che simula un documento tipo all'interno del quale inserire un banner. Non c'è molto da dire su questo documento, se non che è necessario inserire un riferimento al file esterno js, nel punto dove si vuole visualizzare il banner:
<script language="javascript" src="script.js"></script>
Fatto questo su ogni pagina, è possibile modificare ogni documento cambiando semplicemente le impostazione del file esterno .js
Se per qualche ragione non vuoi servirti di un file esterno, puoi tranquillamente inserire la sintassi javascript all'interno dei tag <head></head> del file "esempio.htm"
