Come cambiare dinamicamente uno sfondo in un sito web

Usando CSS e JavaScript, puoi cambiare dinamicamente lo sfondo del tuo sito web. Il codice viene utilizzato per cambiare lo sfondo ogni volta che un utente carica il sito Web in un browser e il codice funziona anche se l’utente aggiorna il sito Web nella finestra del browser. È necessario che le immagini utilizzate nello sfondo siano caricate sul server, in modo che vengano visualizzate correttamente nel browser.

1

Fai clic con il pulsante destro del mouse sulla pagina HTML che desideri modificare e seleziona “Apri con”. Fai clic sul tuo editor HTML nell’elenco dei programmi.

2

Carica ogni immagine in un array JavaScript. Ad esempio, il codice seguente crea un array di due immagini sul server host Web:

var background = new Array (); sfondo [0] = “/images/bg1.gif”; sfondo [1] = “/images/bg2.gif”;

3

Genera un numero casuale. Il numero casuale viene utilizzato per recuperare in modo casuale un’immagine dall’array. In questo esempio, vengono caricate due immagini, quindi è necessario generare un numero compreso tra 0 e 1. Il codice seguente genera un numero casuale:

var numberGen = Math.floor (Math.random () * 1)

4

Visualizza l’immagine di sfondo dall’array. Il codice seguente combina la matrice di immagini e il numero casuale per visualizzare un’immagine casuale come sfondo del sito Web:

document.body.style.background = ‘url (‘ + background [numberGen] + ‘)’;