Banner animati


Avete visto il banner che c'è nella prima pagina, quello che sponsorizza il sito del Gianna? Ebbene ci sono voluti solo un paio di minuti per crearlo e l'effetto direi che non è niente male. Se contate il fatto che non è composto da immagini, ma è uno script (quindi testo), risulta anche estremamente veloce da caricare.
Giocando con i colori e con le scritte si possono fare delle cose divertenti e veloci da caricare, e sono a tutti gli effetti dei banner, perché ci si può anche cliccare sopra per aprire altre pagine.
Ecco lo script necessario a creare il banner; ho preso proprio quello che si trova nella prima pagina:

<div id="gpromo" style="width:50%;height:25px;border:3px ridge red;background:orange;color:black;cursor:hand" onclick="window.open('http://web.tiscalinet.it/sitodelgianna', '_blank');" align="center">

</div>

<script language="javascript">
var puntatore = 0;

function ruota()
{
var scritte = new Array ('Visita anche...', 'http\:\/\/web\.tiscalinet\.it\/sitodelgianna', 'by Il Gianna', 'Da non perdere\!\!\! - Parola di AlexMfM', 'Clicca qui sopra per visitarlo');

if (puntatore>4)
{puntatore=0;}

gpromo.innerHTML= scritte[puntatore];
puntatore++;
}

setInterval("ruota()", 3000);
ruota();

</script> 		Come oramai capirete istantaneamente, il primo è l'oggetto che diventerà il nostro banner. Al suo interno gli viene assegnato un nome e le proprietà per definirne l'aspetto. Invece, al click del mouse viene chiamato il metodo window.open che apre il sito specificato dall'url in una nuova finestra (specificato dal nome di finestra '_blank').
Lo script è estremamente semplice: si crea un array che conterrà le scritte da far ruotare. In seguito si controlla la variabile puntatore (definita fuori dalla funzione) e se è maggiore di 4 (l'ultimo indice dell'array, ovvero il quinto elemento) viene reimpostata a zero, altrimenti prima cambia il testo all'interno dell'oggetto e poi incrementa la variabile.
Attenzione!!! L'attributo innerHTML non serve solo a inserire del testo. Come dice l'attributo stesso si può inserire del codice HTML, quindi se ce ne fosse bisogno si potrebbe usare qualsiasi tag.
Ritornando allo script, si imposta un intervallo e si richiama la funzione per farla partire.