Javascript: visualizzare immagini casuali sul proprio sito

0 Condivisioni

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.

logo javascript - Javascript: visualizzare immagini casuali sul proprio sito

<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.


0 Condivisioni

Fabrizio Cannatelli

Fondatore di Informarea.it, è un appassionato di informatica. Ha lavorato per molti anni come Analista Programmatore presso varie aziende utilizzando diversi linguaggi di sviluppo, oggi svolge un lavoro completamente diverso ma la voglia di comunicare e di condividere con il web i suoi studi e le sue curiosità lo hanno spinto a far nascere questo blog non solo per esprimere e mostrare la passione per questo mondo, ma anche per confrontarsi con nuove esperienze di sviluppo.

Fabrizio Cannatelli

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.