Immagine casuale javascript
Come far visualizzare
un'immagine diversa ogni volta che viene caricata la pagina web.
Con Javascript è decisamente molto semplice. Partiamo da uno script
già funzionante per spiegarne poi il funzionamento.
<script language="JavaScript">
img = new Array()
img[0] = 'foto1.jpg" width="" height=""
border=""';
img[1] = 'foto2.jpg" width="" height=""
border=""';
img[2] = 'foto3.jpg" width="" height=""
border=""';
ran = Math.floor(3 * Math.random());
document.write("<img src=""+img[ran]+"">");
</script> |
Cerchiamo di capire insieme il funzionamento dello script. In primo luogo
definiamo la variabile img come vettore.
img = new Array()
Successivamente assegnamo ai primi tre elementi il nome di un'immagine
diversa (foto1.jpg, foto2.jpg,...). Il contenuto dei tre elementi sono
tre valori-stringa diversi in cui sono inseriti i principali parametri
del tag <img> mediante il quale si visualizza in Html un'immagine.
img[0] = 'foto1.jpg" width="" height=""
border=""';
Una volta definito il vettore e assegnati i valori di stringa, lo script
esegue la funzione Math.random per generare un numero casuale da 0 a 0.999.
Moltiplicando questo valore random per il numero costante 3 otteniamo
un numero casuale da 0 a 2. Il risultato di questa espressione matematica
viene infine arrotondato mediante la funzione Math.floor. In questo modo
otteniamo un numero casuale intero (senza virgola). La variabile ran assumerà
pertanto come valore il numero 0, il numero 1 o il numero 2 ogni qualvolta
sia ricaricata la pagina web.
ran = Math.floor(3 * Math.random());
Per concludere lo script vediamo come utilizzare questo valore random
per visualizzare un'immagine piuttosto che un'altra. Nell'ultima istruzione
viene visualizzato il tag <img src=""> insieme all'elemento
della variabile img[] relativo al numero casuale (0, 1 o 2) assunto dalla
variabile ran.
document.write("<img src=""+img[ran]+"">");
Per fare un esempio pratico, se il numero casuale della variabile ran
fosse pari a 1 lo script prenderà in considerazione i parametri
contenuti nella variabile stringa img[1] pubblicando a video l'immagine
foto2.jpg.
ecomatrix
scrivi al sito
ecomatrix@gmail.com
Guide online
