a cura di Michele Basso

Con il javascript di cui parleremo oggi, è possibile visualizzare una serie di banner, a rotazione, scegliendo il numero di banner da mettere, gli url da assegnargli, e il tempo che passerà tra la visualizzazione di un banner e l'altro. tutto questo solamente con l'ausilio di javascript, molto utile per quelli che nel proprio spazio web non possono utilizzare linguaggi server side!

Iniziamo aprendo la pagina in cui vogliamo inserire i banner; per prima cosa dovremo inserire questo codice all'interno del tag head:

<SCRIPT LANGUAGE="JavaScript"> <!-- Hide from JavaScript-Impaired Browsers /* First, if you load fewer or more than 6 sponsors into your rotator, change the "sponnr" variable to the actual number of sponsor .gifs you plan to load. */ number_of_sponsors=6; var sctr=0; var halt=0; var isn=new Array(); for (i=0;i<number_of_sponsors;i++){ isn[i]=new Image(); } /* The sponsor .gif names are loaded into the isn[x] sponsor images array. You may load any number of sponsor images (.gif or .jpg or both) into this array. They must all be the same size, however. Substitute your own .gif filenames for the ones shown here. Note that the first .gif must appear in the isn[0] array element. */ isn[0].src="banner01.gif"; isn[1].src="banner02.gif"; isn[2].src="banner03.gif"; isn[3].src="banner04.gif"; isn[4].src="banner05.gif"; isn[5].src="banner06.gif"; /* Finally, replace the URL's below with those of your sponsors IN THE SAME ORDER. */ var durl=new Array(); durl[0]="http://www.sponsor1.it"; durl[1]="http://www.sponsor2.it"; durl[2]="http://www.sponsor3.it"; durl[3]="http://www.sponsor4.it"; durl[4]="http://www.sponsor5.it"; durl[5]="http://www.sponsor6.it"; /* This script is set to rotate every 10 seconds. (5000=5 seconds, so 30000 would equal 30, etc) You should change the number in the setTimeout() call below for the number of seconds you wish. */ function rotateIt(){ if (halt!=1){ sctr++; if (sctr>number_of_sponsors-1){ sctr=0; } document.sponsor.src=isn[sctr].src; setTimeout("rotateIt()",10000); } } /* This code will work just fine with or without frames. However, if you are in frames and wish to replicate the TARGET="_top" call to remove frames, change the location.href call to: parent.location.href=durl[sctr]; below. */ function doIt(){ halt=1; location.href=durl[sctr]; } function dispIt(){ parent.window.status=durl[sctr]; } // End Hiding --> </SCRIPT>

Per prima cosa dobbiamo scegliere il numero di banner che verranno utilizzati; per farlo modifichiamo il valore numerico in questa riga:

number_of_sponsors=6;

In questo caso il valore è 6, cioè verranno inseriti 6 banner.

Adesso vediamo come selezionare il percorso dell'immagine: all'interno del javascript è presente un array che ci permetterà di selezionare le immagini; osserva l'esempio

isn[0].src="banner01.gif";
isn[1].src="banner02.gif";
isn[2].src="banner03.gif";
isn[3].src="banner04.gif";
isn[4].src="banner05.gif";
isn[5].src="banner06.gif";

Molto semplice vero? Basta infatti cambiare solamente il nome dell'immagine!

Lo stesso discorso va fatto per gli url che vengono assegnati ai vari banner; osserva l'esempio

durl[0]="http://www.sponsor1.it";
durl[1]="http://www.sponsor2.it";
durl[2]="http://www.sponsor3.it";
durl[3]="http://www.sponsor4.it";
durl[4]="http://www.sponsor5.it";
durl[5]="http://www.sponsor6.it";

Anche qui basterà cambiare solamente l'url.

Per scegliere invece il numero di secondi che passerà tra la visualizzazione di un banner e l'altro, andiamo a questa riga:

setTimeout("rotateIt()",5000);

In questo caso 5000 corrisponde a 5 secondi (1000 1 secondo, 5000 5 secondi, 10000 10 secondi, e così via)

Adesso dobbiamo inserire un piccolo codice nel punto in cui vogliamo che vengano visualizzati i banner. Il codice è il seguente:

<A HREF="#" onClick="doIt();return false" onMouseover="dispIt();return true;">

Per ogni dubbio e perplessità consultate il nostro forum, dove vi potranno aiutare se avete qualunque problema tecnico sull'utilizzo di questo javascript!