Categories: InternetProgrammazione

Banner Pubblicitari in Rotazione

Una visualizzazione ciclica a rotazione di immagini con possibilità di avere un collegamento ipertestuale per ognuna di esse, si presta molto bene alla creazione di più banner pubblicitari all’interno dello stesso spazio.

<html>
<head>
<title>Banner Pubblicitari in JavaScript</title>

<script language="javascript">
<!--
var cur = 0;
var img = new Array;
var coll = new Array();

img[0] = new Image();
img[0].src = "natura.jpg";
coll[0] = "http://www.rgpsoft.it";

img[1] = new Image();
img[1].src = "persona.jpg";
coll[1] = "http://www.altatuscia.info";

function ruota()
{
 cur++;
 if (cur >= img.length)
  cur = 0;
 document.images["banner"].src = img[cur].src;
 setTimeout("ruota()", 10000);
}

function click()
{
 window.open(coll[cur]);
}
-->
</script>

</head>
<body onload="setTimeout('ruota()', 10000)">

<a href="javascript:click()">
<img name="banner" src="natura.jpg" border="0"
            alt="Sponsor" width="300" height="200">
</a>

</body>
</html>

Nella prima parte dello script vengono caricate le immagini ed i collegamenti in due array distinti, inoltre viene inizializzato a zero il contatore che indica l’immagine corrente ( in questo caso ho fatto l’esempio più semplice possibile con due sole immagini ). Nel corpo del documento ho inserito il richiamo temporizzato ( dopo 10 secondi ) della funzione ruota(), che serve soltanto a scambiare le immagini, quando viene caricata la pagina. Abbiamo quindi che la funzione setTimeout viene richiamata ogni 10 secondi, il tempo che deve essere visibile il nostro banner pubblicitario.
Ovviamente questo listato ha il solo scopo didattico, giusto per farvi vedere come è possibile implementare un adRotator molto semplice. Sarebbe bello poter avere una transizione nello scambio delle immagini e per questo ci sono moltissime risorse già pronte in rete, sia per la rotazione dei banner pubblicitari sia per creare degli slideshow.