17/05/2011

Banner Rotazione

Rotazione banner temporizzati in Javascript NetWork per Siti web

I criteri di gestione pubblicitaria consigliano l'impiego dei banner utilizzando strumenti di rotazione al fine di poter mostrare, all'interno della stessa area pubblicitaria, un banner differente ad ogni caricamento della pagina.

Grazie al Javascript possiamo fare anche di più. Possiamo infatti far si che i banner ruotino in continuazione e non solo al reload della pagina corrente o al passaggio ad un'altra pagina, ma semplicemente impostando una temporizzazione che ne gestisca la rotazione, creando un vero e proprio circuito di rotazione banner temporizzati.

Iniziamo col procurarci dei banner di una qualsiasi dimensione (preferibilmente uguale tra loro, ad esempio 468X60) e disponiamoli in una cartella che chiameremo banner.

A questo punto ricordiamo che tutte le pagine Web in cui vorremo richiamare i banner dovranno richiamare la funzione mostra_banner() (dello script che esamineremo a breve) al caricamento della pagina:

<body onload="mostra_banner()">

A questo punto inseriamo il seguente elemento di testo nel punto in cui vogliamo che il circuito in rotazione compaia:

<div id="banner"></div>

Richiamiamo poi lo script che sarà inserito in un file Javascript esterno:

<script type="text/javascript" src="banner.js"></script>

Creiamo adesso il file banner.js ed inseriamo il seguente codice:

var imm = new Array(); imm[0] = "banner/pippo.gif"; imm[1] = "banner/pluto.gif"; imm[2] = "banner/paperino.gif"; var lnk = new Array(); lnk[0] = "http://pippo.disney.com/"; lnk[1] = "http://pluto.disney.com/"; lnk[2] = "http://paperino.disney.com/"; var x = 0; var mostra = document.getElementById("banner"); function mostra_banner() { mostra.innerHTML = "<a href='" + lnk[x] + "'><img src='" + imm[x] + "'></a>"; window.setTimeout("mostra_banner()", 5000); imm.length - 1 == x ? x = 0 : x++;

Vediamo com'è composto lo script.

Creiamo due array in cui contenere, rispettivamente, il percorso delle immagini ed i relativi collegamenti. Impostiamo poi una variabile di tipo contatore e recuperiamo l'elemento HTML in cui comparirà il banner.

A questo punto creiamo la funzione che mostrerà i banner a video e, per prima cosa, stampiamo a video il banner, lanciamo la temporizzazione (impostata in questo momento su 5 secondi) e poi controlliamo l'attuale valore del contatore: se è uguale al numero di banner presenti lo impostiamo su zero, altrimenti lo incrementiamo.

In questo modo mostriamo i banner in sequenza, ma potremmo anche scegliere di mostrarli a caso. Per fare ciò è necessaria una sola semplice modifica. Cancelliamo la riga:

imm.length - 1 == x ? x = 0 : x++;

E scriviamo la riga:

x = Math.floor((imm.length) * Math.random());

il cui compito è quello di estrarre un numero casuale compreso tra zero ed il numero di banner impostati negli array.

 

19:58 Scritto da: networkweb in Banner Rotazione | Link permanente | Commenti (0) | Segnala | Tag: banner rotazione, banner, pubblicità, banner rotator, banner flash, banner rotator flash, info banner, rotator, sito banner, network banner | OKNOtizie | |  del.icio.us | | Digg! Digg |  Facebook