INDICE

CAMBIARE IMMAGINE A SECONDA DELL'ORA O DEL GIORNO CON JAVASCRIPT

JavaScript permette di conoscere la data e l'ora corrente. Attraverso il comando data = new Date la data corrente, completa di ora attuale, viene memorizzata nella variabile di nome data.
JavaScript inoltre permette di estrarre dalla data le varie parti che la compongono, fra le quali segnaliamo:

I nomi delle variabili possono essere scelti a piacere, mentre le funzioni predefinite getDate(), getHours() eccetera sono riservate: vanno scritti così come sono, comprese le maiuscole e gli spazi, pena il malfunzionamento del programma. Notare poi che, una volta memorizzata la data corrente nella variabile di nome data, occorre sempre fare riferimento ad essa. (Ad esempio, abbiamo scritto data.getHours() e così via).

Si vede perciò che è possibile visualizzare immagini a seconda del giorno o dell'ora stabilita.

PASSO UNO

Inserire un'immagine nella posizione preferita ricordandosi di darle un nome: a questo infatti dovremo fare riferimento per visualizzare le altre immagini. Useremo pertanto il seguente codice:

<img src="http://www.webfract.it/GUIDA/img1.jpg" name="galle" height=206 width=298 align=left> 
per inserire l'immagine memorizzata come "pae1.jpg", di altezza 291 pixel e larghezza 268 pixel, allineata a sinistra. A questa zona, in cui vogliamo visualizzare le immagini, abbiamo dato il nome "galle". E' bene che tutte le immagini abbiano le stesse dimensioni per ottimizzare la visualizzazione della pagina.

PASSO DUE

Inseriamo fra i tags <head> ed </head> il seguente codice Javascript:

<script language="JavaScript">
function apri(conta) {
nuovo=new Array("img0.jpg","img1.jpg","img2.jpg","img3.jpg","img4.jpg",
"img5.jpg","img6.jpg","img7.jpg","img8.jpg","img9.jpg",
"img10.jpg","img11.jpg","img12.jpg","img13.jpg","img14.jpg"
,"img15.jpg","img16.jpg","img17.jpg","img18.jpg","img19.jpg"
,"img20.jpg","img21.jpg","img22.jpg","img23.jpg") document.galle.src=nuovo[conta] } function avvia() { data = new Date ora=data.getHours() apri(ora) } </script>
La funzione avvia() calcola l'ora corrente e chiama la funzione apri(ora). Se ad esempio sono le ore 10, la variabile ora assume, per l'appunto, il valore 10, e quindi è come se venisse dato l'ordine di aprire l'immagine memorizzata al decimo posto e che noi, per semplicità, abbiamo chiamato "img10.jpg" (da mezzanotte fino alle 0.59 sarà aperta la prima immagine memorizzata nell'array, dalle 1 alle 1.59 sarà aperta la seconda immagine memorizzata nell'array e così via).
Ma ora studiamo la funzione apri(conta) . In essa all'inizio viene creata la variabile strutturata, o array, di nome nuovo nella quale vengono memorizzate, ordinatamente, le 24 immagini che saranno visualizzate a seconda dell'ora. In questa riga, al posto di "img1.jpg", "img2.jpg" eccetera, sostituire i nomi delle immagini in proprio possesso con relativa estensione. Le immagini non devono necessariamente essere diverse: se ad esempio vogliamo cambiare immagine ogni tre ore, scriveremo per tre volte di seguito lo stessa immagine. L'importante è che la variabile nuovo contenga esattamente 24 dati, altrimenti viene generato un messaggio di errore.
La linea di codice document.galle.src=nuovo[conta] serve a caricare, nella zona che avevamo chiamato "galle", l'immagine il cui numero corrisponde a conta. Se allora, ritornando all'esempio precedente, sono le ore 10, viene sostituito, al posto di conta, nella funzione apri(conta), il numero 10, e perciò viene visualizzata l'immagine corrispondente al numero 10.

PASSO TRE

Non ci resta che modificare il tag body:
<body onLoad= "avvia()">
In questo modo al caricamento della pagina verrà avviata la funzione predisposta ed otteremo il risultato desiderato. Chiaramente all'interno del tag body potremo lasciare invariate tutte le altre opzioni, come colore di fondo, tipo di carattere e così via.

Cambiare immagine a seconda del giorno della settimana è del tutto simile: occorre preparare un array di 7 immagini, sempre da memorizzare nella variabile di nome nuovo , quindi nella funzione avvia(), sostituire alla riga ora=data.getHours() il codice data.getDay().

A proposito, l'immagine visualizzata in alto a destra all'inizio di questa pagina, cambia, per l'appunto, ogni ora: PROVARE PER CREDERE!!!!


INDICEINDIETRO

©2002 www.webfract.it