so che molto probabilmente questo post servirà a pochi, ma ho pensato di scrivere due linee di codice per ritornare ad occuparmi del blog non aggiornato ormai da mesi.
Oggi vediamo come creare uno script per realizzare un banner per il nostro sito.
Sfruttando la funzione setTimeout(..,..) già vista in http://tinformatizzo.blogspot.com/2011/01/ricaricare-refresh-la-pagina-html-con.html ed il metodo innerHTML verrà realizzato il nostro banner.
Il banner dinamico consiste nel caricare un'immagine ogni tot secondi ed una volta finite le immagini ricominciare di nuovo il ciclo di visualizzazione.
Come al solito verrà riportato l'intero codice javascript inserito nella pagina HTML e poi verrà commentato (in grassetto vengono riportate le parti degne di nota).
<html>
<head>
<title>Banner_javascript</title>
<script type="text/javascript">
var secondi=2;
var pagina='./Banner.html';
var millisecondi=secondi*1000;
var immagine=2;
var totale_immagini=3;
function ricarica()
{
if (immagine==1)
{
document.getElementById("banner").innerHTML="<img src='Uno.jpg' />";
}
else if (immagine==2)
{
document.getElementById("banner").innerHTML="<img src='Due.jpg' />";
}
else if (immagine==3)
{
document.getElementById("banner").innerHTML="<img src='Tre.jpg' />";
}
immagine=immagine+1;
if (immagine==totale_immagini+1)
{
immagine=1;
}
setTimeout('ricarica()',millisecondi);
}
setTimeout('ricarica()',millisecondi);
</script>
</head>
<body>
<p align="center">
<b>BANNER</b>
<div id="banner" align="center">
<img src='Uno.jpg' />
</div>
</p>
</body>
</html>
Bene, prima di provare il codice, ricordate di salvare tre immagini (Uno.jpg, Due.jpg, Tre.Jpg) all'interno della directory dove metterete il file .html con il suddetto codice.
Fermo restando che la struttura di base rimane quella del refresh automatico di pagina http://tinformatizzo.blogspot.com/2011/01/ricaricare-refresh-la-pagina-html-con.html, in questo caso ovviamente non si tratta di ricaricare l'intera pagina, ma solo il banner all'interno della pagina.
Il nostro banner all'interno della pagina lo troviamo tra i tag <body> e </body> e non è altro che un div (da notare che all'interno dei tag div vi è già l'immagine che deve essere caricata al caricamento della pagina):
<div id="banner" align="center">
<img src='Uno.jpg' />
</div>
L'obiettivo è quello di caricare all'interno del nostro div dei contenuti diversi allo scorrere del tempo. Perciò innanzitutto creiamo una variabile "puntatore" (chiamata così impropriamente) e che punta all'immagine che deve essere caricata ed una variabile che contiene il numero totale di immagini da caricare:
var immagine=2;
var totale_immagini=3;
Nella funzione ricarica() poniamo le seguenti linee di codice:
if (immagine==1)
{
document.getElementById("banner").innerHTML="<img src='Uno.jpg' />";
}
else if (immagine==2)
{
document.getElementById("banner").innerHTML="<img src='Due.jpg' />";
}
else if (immagine==3)
{
document.getElementById("banner").innerHTML="<img src='Tre.jpg' />";
}
In base all'immagine da caricare (la uno,la due o la tre) si utilizza l'istruzione document.getElementById("banner").innerHTML dove "banner" non è altro che l'id del div nel body e dove innerHTML ci consente di andare a modificare la porzione di codice HTML all'interno del div in questione.
Nel div noi abbiamo il tag per la visualizzazione dell'immagine <img src='Uno.jpg' />. Quando ad esempio la variabile immagine sarà uguale a 2 allora la porzione di codice all'interno del div verrà sostituita con "<img src='Due.jpg' />".
Di seguito all'interno della function ricarica() troviamo subito le seguenti linee:
immagine=immagine+1;
if (immagine==totale_immagini+1)
{
immagine=1;
}
Queste righe permettono di incrementare di uno la variabile immagine e quindi a puntare alla prossima immagine da caricare quando verrà richiamata nuovamente questa funzione e inoltre consentono di ricominciare il ciclo impostando la variabile a 1 quando sono state visualizzate già tutte le immagini.
Infine troviamo la seguente riga:
setTimeout('ricarica()',millisecondi);
Questa linea di codice è presente sia alla fine della function ricarica() perchè deve essere richiamata ogni volta per ricominciare il conteggio dei secondi che alla fine dello script per essere eseguita la prima volta che viene caricata la pagina (e quindi per richiamare per la prima volta la function ricarica()).
Se volete aggiungere altre immagini al banner basta aggiungerle nella stessa cartella in cui è presente il file html, modificare il valore della variabile totale_immagini e replicare una di seguito all'altra le righe di codice relative al blocco if:
else if (immagine==4)
{
document.getElementById("banner").innerHTML="<img src='Quattro.jpg' />";
}
In questo caso ho aggiunto l'immagine Quattro.jpg.
So che molti diranno che è una scrittura semplicistica.. che ci sono migliaia di modi altri.. utilizzando ajax o semplicemente migliorando il codice.. ma qui si è data una soluzione veloce..
Nessun commento:
Posta un commento