Lo script che presentiamo ci permetterà di mostrare dei banner in ordine casuale con la possibilità di associare ad essi un link con uno specifico target. Risolviamo, quindi, il classico problema riscontrato con script simili; questo codice potrà essere utilizzato anche in un sito strutturato a frames.
L'esempio si compone di 6 file:
- esempio.htm
- 1.gif
- 2.gif
- 3.gif
- 4.gif
- 5.gif
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.
Lo script può essere inserito nella pagina in due modi. Direttamente nel corpo della pagina (nel punto in cui vogliamo far apparire i banner) oppure come file javascript esterno (spiegheremo dopo come fare).
Nel primo caso inseriamo il codice in un qualsiasi punto della pagina:
<script type="text/javascript" language="javascript">
var openInNewWin = true;
var banners = new Array();
banners[0] = new Banner("http://hosting.html.it", "Hosting.html.it", "1.gif");
banners[1] = new Banner("http://gifanimate.html.it", "Gif Animate", "2.gif");
banners[2] = new Banner("http://freeasp.html.it", "Freeasp.html.it", "3.gif");
banners[3] = new Banner("http://linux.html.it", "Linux.html.it", "4.gif");
banners[4] = new Banner("https://www.html.it/java/index.html", "550 Applet Java",
"5.gif");
function Banner(url, description, image) {
this.url = url;
this.description = description;
this.image = image;
return this;
}
var bNum = Math.round(Math.random() * (banners.length - 1));
document.write("<a href="" + banners[bNum].url + """);
if (openInNewWin) {
document.write(" target="_blank"");
}
document.write(">");
document.write("<img src="" + banners[bNum].image + "" border="0" alt=""
+ banners[bNum].description + ""/>");
document.write("</a>");
</script>
Vediamo le variabili da personalizzare:
var openInNewWin = true;
se desideriamo utilizzare un target specifico (che imposteremo dopo) settiamo TRUE altrimenti FALSE (e il link verrà aperto nella pagina corrente)
Prepariamo le stringhe (in questo caso sono degli array) contenenti i dati di ogni singolo banner.
Ogni array avrà questa struttura: LINK A CUI PUNTA IL BANNER, TESTO DESCRITTIVO DEL BANNER, GIF DEL BANNER DA RICHIAMARE.
Non c'è limite agli array da inserire, basterà seguire, come al solito, la numerazione progressiva partendo da zero.
Nell'esempio sono stati usati 5 array e quindi 5 banner diversi:
banners[0] = new Banner("http://hosting.html.it", "Hosting.html.it", "1.gif");
banners[1] = new Banner("http://gifanimate.html.it", "Gif Animate", "2.gif");
banners[2] = new Banner("http://freeasp.html.it", "Freeasp.html.it", "3.gif");
banners[3] = new Banner("http://linux.html.it", "Linux.html.it", "4.gif");
banners[4] = new Banner("https://www.html.it/java/index.html", "550 Applet Java", "5.gif");
Adesso basterà impostare il target desiderato; in questo caso _blank
document.write(" target="_blank"");
È possibile, comunque, usare un target diverso nel caso utilizzassimo i frames.
Prima di concludere un piccolo consiglio; dato che il codice è abbastanza lungo e potrebbe essere scomodo doverlo usare nel corpo della pagina è possibile inserire lo script in un file esterno e richiamarlo con una semplice linea di codice. Oltretutto sarà più facile fare le modifiche (aggiungere o togliere banner) nel caso avessimo usato il javascript in più pagine del sito.
Procediamo così: copiamo il codice appena analizzato (senza però i tag <script language="javascript"> e </script>) in un file di testo fatto con Notepad; salviamo il documento con estensione .js, per esempio "banner.js".
A questo punto basterà inserire il richiamo al file esterno in ogni pagina desiderata:
<script language="javascript" src="banner.js">
<!--
//-->
</script>
