Ciao, puoi usare semplicemente un elemento <img> come segnaposto sul tuo html, quindi aggiornare via JavaScript solo l'attributo src di tale elemento. Questo mostra la nuova immagine senza bisogno di aggiornare la pagina. Poi con un setInterval o setTimeout puoi eseguire dei controlli ogni tot in modo da aggiornare l'elemento img al cambio di ora.
Posto un esempio pratico da cui puoi prendere spunto:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
var imgLoop = { // aggiorna l'img ogni ora secondo l'elenco specificato
src: [
"smile.gif" // ora 0
, "frown.gif" // ora 1
, "what.gif" // ...e così via
, "mad.png"
, "tongue.png"
, "blink.gif"
, "biggrin.gif"
, "redface.png"
, "rolleyes.png"
, "cool.png"
, "eek.gif"
, "030.gif"
, "jam.gif"
, "dotto.gif"
, "stordita.gif"
, "fagiano.gif"
, "nondirlo.gif"
, "noncisiamo.gif"
, "metallica.gif"
, "sgrat.gif"
, "senzasperanza.gif"
, "sbonk.gif"
, "dho.gif"
, "cool.gif"
]
, path: "http://forum.html.it/forum/images/smilies/" // percorso della cartella immagini
, tagImg: imgBox // elemento img
, delay: {} // oggetto per setTimeout
, start: function(updateImg){ // funzione di avvio loop
var now = new Date() // questo istante
var leftTime = 3600000 - now.getMilliseconds() - now.getSeconds()*1000 - now.getMinutes()*60; // tempo rimanente fino allo scoccare della prossima ora
(leftTime >= 2000)? leftTime*=.75 : leftTime+=5; // uso 3/4 del tempo rimanente con un minimo di 2 secondi
if (updateImg) imgLoop.update(now.getHours()); // se indicato, aggiorno l'immagine
imgLoop.delay = setTimeout(imgLoop.start,leftTime,leftTime < 2000) // timer per il prossimo controllo. Indico di aggiornare l'img se mancano meno di 2 sec
}
, update: function(id){ // funzione di aggiornamento img
id = id || new Date().getHours();
imgLoop.tagImg.src = imgLoop.path + imgLoop.src[id];
}
, stop: function(){ // funzione di interruzione loop
clearTimeout(imgLoop.delay)
}
}
imgLoop.start(true); // avvio il loop
}
</script>
</head>
<body>
<img id="imgBox" src="noimg" alt="">
</body>
</html>
Ovviamente ci possono essere svariate soluzioni.
Rispondi quotando
Grazie a tutti e a te guru. 
