rotazione immagini cliccabili

Javascript per la Rotazione di Immagini Cliccabili 2
con diverse modalità di funzionamento

Questa seconda versione dello script ha gli stessi vantaggi della prima versione, ma si differenzia per la modalità con cui avviene il preload delle immagini.
A differenza della prima versione il preload non avviene immediatamente per tutte le immagini all'apertura della pagina, ma all'apertura della pagine viene precaricata solo la prima, le altre saranno caricate negli intervalli di visualizzazione fra un'immagine e la successiva. Questo risulta utile quando i banner da visualizzare molti, infatti ci permette avere la fluidità nel cambio delle immagini, di evitar rallentamenti all'apertura della pagina e nel momento del cambio di immagine perché riusciamo a sfruttare quei momenti in cui il browser sarebbe inattivo.

I vantaggi dello script sono:

1) la semplicità di configurazione (tempi di esposizione, target links);
2) il non dover inserire un immagine iniziale;
3) poter scegliere la modalità di funzionamento:
       a) visualizzando le immagini in modo sequenziale;
       b) visualizzando le immagini in modo casuale (random);
4) l'immagine iniziale (sia in modalità sequenziale che casuale) può essere sempre la stessa oppure può essere scelta in modo casuale ;
5) preload delle immagini negli intervalli di inattività per rendere la visualizzazione fluida.
6) la compatibilità con tutti i browser, testato con: Netscape 4 e 7, Mozilla, Opera e Explorer e conforme ai requisiti W3C HTML4.01.

Come nella prima versione se dobbiamo impostare una rotazione di banner questo script garantisce assoluta equità di esposizione farà i vari banner, infatti utilizzando la modalità sequenziale i banner verranno esposti tutti lo stesso numero di volte, inoltre se si imposta la scelta della prima immagine in modo casuale la sequenza di esposizione non inizierà dalla prima immagine ma da una scelta a caso, questo evita di favorire il primo banner inserito nello script (in quanto subito e sicuramente visto). Comunque abbiamo la possibilità di scegliere se visualizzare sempre una determinata immagine come prima.

Passiamo allo script,
parte da inserire fra i tag <head> e </head> :

<script language="javascript" type="text/javascript">

</script>

****** Configurazione parte in head ******

Non spaventatevi se sembra lungo è facile da gestire.

1) var intervallo= 3000;
dobbiamo inserire il tempo di esposizione delle varie immagini (banner), il tempo è espresso in millesimi di secondo, io ho impostato 3000 che corrisponde a 3 secondi.

2) var target_l="_blank";
dobbiamo impostare il target dei links, io ho messo _blank che sta a significare che il link verrà aperto in una nuova finestra, ma potete mettere un altro target come nei normali links in html quindi potete usare:

"_blank" : per aprire i links in una nuova finestra;
"_self" : per aprire i links nella stessa pagina del banner;
"_parent" : per aprire i links al posto di una struttura a frames;
"_top" : per aprire i links eliminando tutte le strutture a frames,
"name_frame" : se mettete il name del frame di destinazione i links saranno aperti in esso.

3) impostati questi parametri generali si devono inserire le immagini, queste saranno inserite in un array, nell'esempio ne ho messe 5, ma se ne possono inserirne quante se ne vuole.

var immagini=new Array(); // inserire le immagini
immagini[0]= "nome_img1.jpg";
immagini[1]= "nome_img2.jpg";
immagini[2]= "nome_img3.jpg";
immagini[3]= "nome_img4.jpg";
immagini[4]= "nome_img5.jpg";

Se volete aggiungere immagini dovete solo aggiungere righe come questa:

immagini[5]= "nome_img6.jpg";

se ne volete aggiungere un altra la riga sarà:

immagini[6]= "nome_img7.jpg";

e così via.

Importante: per ogni immagine aggiunta dovete cambiare il numero fra le parente quadre [], ricordatevi però che in js si inizia a contare dallo zero.
Se volete togliere delle immagini dovete solo eliminare le righe in più.

4) per i links vale quando detto per le immagini, il procedimento è lo stesso sia per l'aggiunta che per la rimozione.

url_link[5] = "http://www.sito-6.com";

I links verranno associati secondo l'ordine di inserimento all'immagine corrispondente, quindi il link inserito nella prima posizione corrisponderà all'immagine inserita per prima e così via.

I links possono essere sia assoluti che relativi, nel caso siano assoluti si deve inserire http:// prima dell'URL (come nei normali links in html).

****** parte nel corpo della pagina ******

Bene ora dobbiamo inserire questo codice nella pagina nel punto in cui vogliamo appaiano le immagini lincate:

<script language="javascript" type="text/javascript">

</script>

In questa parte di codice l'unica cosa che dobbiamo personalizzare sono le dimensioni, dobbiamo solo mettere le dimensioni in pixel dell'immagine più grande, io ho inserito 468 di larghezza e 60 di altezza perché sono le misure tipiche dei banner. ( ho dovuto aggiungere questo scripttino per essere conforme sia la W3C che al vecchio Netscape 4.x)

****** configurazioni avanzate ******

Anche questa versione funzionare in diverse modalità. Per cambiare la modalità di funzionamento si devono cambiare alcune piccole impostazioni.

1) La versione che è postata è impostata per iniziare una visualizzazione sequenziale da un immagine casuale della sequenza, in moda da garantire la massima equità di esposizione fra i vari banner.

2) Se vogliamo che lo script visualizzi le immagini in sequenza partendo sempre dalla prima immagine dobbiamo aggiungere due barre // davanti a questa istruzione (che troviamo a metà dello script):

nb=Math.floor(Math.random()*immagini.length);

che diventerà :

// nb=Math.floor(Math.random()*immagini.length);

3) Volendo possiamo far funzionare lo script in modalità completamente casuale (random) tutte le immagini saranno scelte in modo random (casuale) per fare questo dobbiamo togliere le // davanti a questa riga (che si trova verso il fondo dello script):

nb +=1;
/* per impostare la visualizzazione casuali delle immagini
togliere le due // davanti alla stringa qui qui sotto: */

// nb=Math.floor(Math.random()*immagini.length);

if( nb >= immagini.length){nb=0;}

diventerà:

nb +=1;
/* per impostare la visualizzazione casuali delle immagini
togliere le due // davanti alla stringa qui qui sotto: */

nb=Math.floor(Math.random()*immagini.length);

if( nb >= immagini.length){nb=0;}

La stringa che si trova a metà script non avrà nessuna barra davanti:
nb=Math.floor(Math.random()*immagini.length);

4) L'ultima opzione è quella di far visualizzare le immagini in modo casuale, ma facendo in modo che la prima immagine visualizzata sia sempre la stessa (ad esempio nel caso in cui questa immaggine contenga un messaggio di benvenuto o un banner che deve essere assolutamente visto).
Per fare questo la stinga a metà script dovrà avere due barre davanti e la stringa in fondo non dovrà averli.

La stringa a metà script avrà 2 // davanti:
// nb=Math.floor(Math.random()*immagini.length);

Mentre la stringa in fondo allo script sarà senza //:
nb=Math.floor(Math.random()*immagini.length);

Con quest'impostazione la prima immagine visualizzata sarà sempre quella inserita per prima nell'array.

Anche le impostazioni avanzate mi paiono semplici da realizzare, comunque se avete dubbi chiedete pure.
potete vedere un esempio pratico qui:
http://www.masenga.com/prove/foto/rot_img2.htm