Javascript: visualizzare immagini casuali sul proprio sito

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.