autorefresh immagini

**rhion** · 06-09-2005, 09:59

Ciao a tutti
avrei bisogno di una mano:
ho una pagina html che prende delle immagini da quattro cartelle diverse restituendo sulla pagina 4 immagini; il problema adesso e che se la pagina non viene aggiornata queste non cambiano e se utilizzo un autorefresh sulla pagina diventa una schifezza perchè ricarica ogni volta tutta la pagina, la mia domanda è come posso far aggiornare solo le immagini senza avere un refresh di tutta la pagina?
Però un altro problema e che non essendo la pagina su un webserver non posso utilizzare asp php ecc. E' possibile risolverlo tutto in html o javascript?
Spero di essere stato chiaro.....
GRAZIE ANTICIPATAMENTE

**Think** · 06-09-2005, 10:10

Originariamente inviato da rhion
E' possibile risolverlo tutto in html o javascript?

secondo me si.. ma non so farti lo script

chiedi qui è meglio:
http://forum.html.it/forum/forumdisp...p?s=&forumid=3

**rhion** · 06-09-2005, 10:17

se adesso chiedo pure li e cross------ quindi aspetto che mi spostino l'amministratore

**Think** · 06-09-2005, 10:43

Segnalalo ad un moderatore che fai prima..

**Mich_** · 06-09-2005, 11:34

Per ricaricare un'immagine, DEVI usare un linguaggio lato client. Con ASP o PHP non ci riesci.

DOMANDE:

L'immagine ha lo stesso nome (viene aggiornata autonomamente sul server) o devi caricare immagini diverse allo stesso posto?
Incaso che siano diverse, dove peschi i nomi?

Le immagini (che si sostituiscono) hanno la stessa dimensione?

L'aggiornamento delle 4 immagini, deve avvenire sincrono, asincrono? La temporizzazione e` fissa?

**rhion** · 06-09-2005, 11:59

io non devo usare ne PHP ne ASP
le immagini hanno sempre lo stesso nome e vengono caricate sempre dalle stesse cartelle e hanno sempre la stessa dimensione e l'aggiornamento deve avvenire simultaneamente per tutte e 4 le immagini. A dirsi sembra una cosa facile ma non riesco a capire come posso risolvere il problema; chiedevo qui perchè credo che in javascript si può fare ma come non so

**Mich_** · 06-09-2005, 12:16

OK la cosa comincia ad essere realizzabile.

Anzitutto occorre "inventare" dei nomi diversi per le immagini (altrimentil browser le ricarica da cache). Questo lo si ottiene aggiungendo un ? ed un valore random.

Passiamo al caso pratico.
codice HTML:

codice:

<div>
...
[img]nomeimm1.gif[/img]
[img]nomeimm2.gif[/img]
[img]nomeimm3.gif[/img]
[img]nomeimm4.gif[/img]
</div>

A questo corrisponde un codice Js (da inserire in uno script della head):

codice:

var bloccoimm = new Array("imm1", "imm2", "imm3", "imm4");
var nomeimm = new Array("nomeimm1.gif", "nomeimm2.gif", "nomeimm3.gif", "nomeimm4.gif");
 
function aggiornaimm() {
for(var i=0; i<elencoimm.length; i++) {
  document.getElementById(bloccoimm[i]).src = nomeimm[i] + "?" + Math.random();
}

per le prove ti conviene inserire (nel codice HTML) un bottone che aggiorna le immagini, poi si puo` automatizzare:

<button value="aggiorna" onclick="aggiornaimm();" />

**rhion** · 06-09-2005, 13:22

puoi dargli una controllata e i dici se è scritto giusto o meno

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>WEB VideoAnalizer</title>

<script language="javascript">
var bloccoimm = new Array("1", "2", "3", "4");
var nomeimm = new Array("Originale/immagine.jpg", "PA/immagine.jpg", "AfterMorph/immagine.jpg", "Stopped/immagine.jpg");

function aggiornaimm() {

for(var i=0; i<4; i++) {
document.getElementById(bloccoimm[i]).src = nomeimm[i];

}
setTimeout('aggiornaimm()',2000);
}
</script>

</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" onLoad=setTimeout('aggiornaimm()',1000);>

<div align="center">
<table border="0" width="800" cellpadding="0" style="border-collapse: collapse" height="600">
<tr>
<td background="immagini/bgsfuma.gif" align="center" valign="top">
<table WIDTH="749" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<tr>
<td>
[img]immagini/WebVideoAnalizer_01.gif[/img]</td>
<td>
[img]immagini/WebVideoAnalizer_02.gif[/img]</td>
<td COLSPAN="2">
[img]immagini/WebVideoAnalizer_03.gif[/img]</td>
<td ROWSPAN="4">
[img]immagini/WebVideoAnalizer_04.gif[/img]</td>
</tr>
<tr>
<td ROWSPAN="3">
[img]immagini/WebVideoAnalizer_05.gif[/img]</td>
<td>
[img]Originale/immagine.jpg[/img]</td>
<td>
[img]immagini/WebVideoAnalizer_07.gif[/img]</td>
<td>
[img]PA/immagine.jpg[/img]</td>
</tr>
<tr>
<td COLSPAN="3">
[img]immagini/WebVideoAnalizer_09.gif[/img]</td>
</tr>
<tr>
<td>
[img]AfterMorph/immagine.jpg[/img]</td>
<td>
[img]immagini/WebVideoAnalizer_11.gif[/img]</td>
<td>
[img]Stopped/immagine.jpg[/img]</td>
</tr>
<tr>
<td COLSPAN="3">
[img]immagini/WebVideoAnalizer_13.gif[/img]</td>
<td COLSPAN="2">
[img]immagini/WebVideoAnalizer_14.gif[/img]</td>
</tr>
</table>
</tr>
</table>

</div>
</body>

</html>

**Mich_** · 06-09-2005, 15:19

Hai fatto troppe modifiche rispetto al mio.

Anzitutto devi eliminare tutti gli attributi di formattazione HTML ed usare invece i CSS. Non e` obbligatorio nei browser attuali, ma semplifichi di molto il codice e scrivi in modo professionale.
Inoltre tag e attributi MAIUSCOLI non sono validi nel Web piu` recente.

var bloccoimm = new Array("1", "2", "3", "4");
i nomi delle immagini non sono validi; gli id sevono iniziare per lettera e contenere solo lettere e numeri

for(var i=0; i<4; i++) {
perche` hai tolto il conteggio automatico? non conviene. Il mio era piu` robusto (rispetto a eventuali modifiche future)

**rhion** · 07-09-2005, 10:11

Ok hai ragione ho preso in considerazione tutti i tuoi suggerimenti ho ricreato la pagina con css e ho messo in pratica tutti gli accorgimenti che mi hai suggerito è il codice javascript l'ho inserito così com'era ed ora va alla grande

GRAZIE Mich_ sei stato gentilissimo

Discussione: autorefresh immagini

Strumenti discussione

Ricerca discussione

Visualizza

autorefresh immagini

Re: autorefresh immagini

Permessi di invio