immagini random...

**blekm** · 16-05-2005, 10:21

salve, mi hanno detto di postare qua.. ho una pagina html con codice php dove ad ogni refresh cambio un immagine.. adesso, io vorrei che l'immagine cambiasse ogni tot secondi, e mi hanno detto che per fare ciò devo usare javascript, in quanto con php non è possibile..

Ho salvato diverse immagini con lo stesso nome e numero a incrementare (immagine01, immagine02, immagine03, e cosi via..) in una cartella /images.

il codice php che uso per cambiare le immagini in maniera random è questo:

$casuale = mt_rand(1,11);
echo "<img src=\images/NOMEIMMAGINE$casuale.jpg \">";

come potrei "temporizzare" questo? magari per fare in modo che l'immagine cambi ogni tot secondi?
spero che qualcuno possa darmi una mano..

**Mich_** · 16-05-2005, 11:56

Quanto la pagina e` sul client, il codice PHP non esiste piu`.
Quindi e` chiaro che non puoi usare PHP.

Devi chiamare una funzione JS che ad intervalli regolari faccia il rollover dell'immagine.

Esempio:
nella head:

codice:

<script type="text/javascript">
var radice = "/images/immagine";
var estens = ".jpg";
var max = <?PHP echo"$numero"?>; 
var oggetto = "ID_IMMAGINE";
function cambiaimm() {
  var rr = Math.floor(Math.random() * max); // (*)
  rr = (rr<10) ? "0" : "" + rr;
  document.getElementById(oggetto).src = radice+rr+estens;
}
</script>

nel body:
<body onload="setInterval('cambiaimm()', 10000);">
...
[img]quellochevuoi.jpg[/img]

Il valore di max va posto uguale al numero delle immagini

(*) Se le immagini inizano da imamgine00.jpg , va bene cosi`, altrimenti se iniziano da immagine01 va sostituito con:
var rr = Math.floor(Math.random() * max + 1);

**blekm** · 16-05-2005, 16:57

proverò appena avrò un attimo di tempo, e ti faccio sapere..
intanto grazie per ora!

**blekm** · 17-05-2005, 12:43

Originariamente inviato da Mich_
Quanto la pagina e` sul client, il codice PHP non esiste piu`.
Quindi e` chiaro che non puoi usare PHP.

Devi chiamare una funzione JS che ad intervalli regolari faccia il rollover dell'immagine.

Esempio:
nella head:

codice:

<script type="text/javascript">
var radice = "/images/immagine";
var estens = ".jpg";
var max = <?PHP echo"$numero"?>; 
var oggetto = "ID_IMMAGINE";
function cambiaimm() {
  var rr = Math.floor(Math.random() * max); // (*)
  rr = (rr<10) ? "0" : "" + rr;
  document.getElementById(oggetto).src = radice+rr+estens;
}
</script>

nel body:
<body onload="setInterval('cambiaimm()', 10000);">
...
[img]quellochevuoi.jpg[/img]

siccome non sono un grande esperto di javascript (e per questo ti ringrazio per avermi tirato giù queste righe di codice..

)
volevo dei chiarimenti riguardo il codice..
per esempio ...

Originariamente inviato da Mich_
[img]quellochevuoi.jpg[/img]

quellochevuoi è semplicemente il nome dell'immagine, giusto?

Originariamente inviato da Mich_
var radice = "/images/immagine";

nel percorso "/images/immagine" cosa s'intende con IMMAGINE? il nome delle immagini?

Originariamente inviato da Mich_
var max = <?PHP echo"$numero"?>;
var oggetto = "ID_IMMAGINE";

invece $numero e ID_IMMAGINE cosa rappresentano? :master:

magari sono stupidate, e per questo ti dico grazie in anticipo per la pazienza, se mi risponderai..

**blekm** · 17-05-2005, 14:28

[img]quellochevuoi.jpg[/img]

se per esempio le foto si chiamano milano01, milano02, milano03... al posto di "quellochevuoi" devo mettere solo "milano" ? intendo, con o senza il numero ?

**Mich_** · 17-05-2005, 14:48

Allora:
radice e` la variabile che contiene tutto il nome (compreso path) fino al numero escluso
estens contiene quello che viene dopo il numero

Nel mio esempio sono partito dai dati che avevi messo.

quellochevuoi e` il path completo dell'immagine, non il suo nome.

ID_IMMAGINE e` il valore dell'attributo id da mettere nel tag <img>. Deve essere un nome che inizia per lettera, contiene solo lettere e numeri (anche _ ) e deve essere unico nella pagina.

max deve contenere il numero totale delle immagini con quella radice e quella estensine. Il browser nonpuo` sapere quanti file ci sono sul server, per cui e` un valore che devi passare, ad esempio tramite PHP; pero` se e` un valroe fisso, basta che scrivi:
max = 15
(supponendo i nomi da milano01.jpg a milano15.jpg)

**blekm** · 17-05-2005, 15:03

Originariamente inviato da Mich_
quellochevuoi e` il path completo dell'immagine, non il suo nome.

quindi la stringa da ..
[img]quellochevuoi.jpg[/img]

diventa..
[img]/images/milano.jpg[/img]

Originariamente inviato da Mich_
radice e` la variabile che contiene tutto il nome (compreso path)

quindi radice da..
var radice = "/images/immagine";

diventa..
var radice = "/images/milano";

Originariamente inviato da Mich_
ID_IMMAGINE e` il valore dell'attributo id da mettere nel tag <img>. Deve essere un nome che inizia per lettera, contiene solo lettere e numeri (anche _ ) e deve essere unico nella pagina.

ID_IMMAGINE può essere una stringa casuale?

correggimi se sbaglio qualcosa qua sopra..
se proprio non riesco a risolvere ti posto il codice html della pagina.

**Mich_** · 17-05-2005, 15:40

[img]/images/milano.jpg[/img]

Non direi, a meno che non hai un'immagine che si chiama "milano.jpg" (senza il valore numerico).
Quella e` l'immagine che viene vista al momento del caricamento della pagina.

diventa..
var radice = "/images/milano";

corretto.

ID_IMMAGINE può essere una stringa casuale?

Non direi, ma non deve essere casuale. Deve essere una stringa valida, e ID_IMMAGINE e` una stringa valdia per un nome.

**blekm** · 17-05-2005, 16:06

perdona la mia durezza...ti posto il codice.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="/style.css" type="text/css">

<script type="text/javascript">
var radice = "/images/inizio";
var estens = ".jpg";
var max = <?PHP echo"$numero"?>;
var oggetto = "ID_IMMAGINE";
function cambiaimm() {
var rr = Math.floor(Math.random() * 11 + 1);
rr = (rr<11) ? "0" : "" + rr;
document.getElementById(oggetto).src = radice+rr+estens;
}
</script>

</head>
<body>
<h1>HOME PAGE</h1>
<lnk>Attributi CSS</lnk>

<body onload="setInterval('cambiaimm()', 100);">
[img]/images/milano.jpg[/img]

</body>
</html>

adesso, ti spiego. nel root ce la cartella IMAGES, e dentro questa ci sono undici immagini nominate milano01, milano02, milano03 ... milano04. Inoltre, nella cartella IMAGES ce un immagine di nome inizio.
grazie ancora per la pazienza...

**Mich_** · 17-05-2005, 16:20

Nella pagina ci sono gravi errori HTML. Qualche browser potrebbe non visualizzare correttamente:
1. manca il title (nella head)
2. ci sono due <body> (non e` permesso)
3. il tag <lnk> non esiste (a mia conoscenza)

Poi ci sono errori nel codice JS.
Lo riscrivo tutto (manca anche una parentesi nel codice che ti avevo dato).

codice:

var radice = "/images/milano";
var estens = ".jpg";
var max = 11;
var oggetto = "ID_IMMAGINE";
function cambiaimm() {
  var rr = Math.floor(Math.random() * max + 1);
  rr = ((rr<11) ? "0" : "") + rr;
  document.getElementById(oggetto).src = radice+rr+estens;
}

Il tag <img> deve essere cosi`:
[img]/images/inizio.jpg[/img]

La frequenza di aggiornamento e` troppo veloce: 10 immagini al secondo non credo possano passare dalla rete.

Prova mettendo il tempo nel setInterval almeno a 10000.

Discussione: immagini random...

Strumenti discussione

Ricerca discussione

Visualizza

immagini random...

Permessi di invio