Como alterar dinamicamente um plano de fundo em um site

Usando CSS e JavaScript, você pode alterar dinamicamente o plano de fundo do seu site. Você usa o código para alterar o plano de fundo toda vez que um usuário carrega o site em um navegador, e o código também funciona se o usuário atualizar o site na janela do navegador. Você deve ter as imagens usadas no plano de fundo enviadas para o seu servidor, para que elas sejam exibidas corretamente no navegador.

1

Clique com o botão direito do mouse na página HTML que você deseja editar e selecione "Abrir com". Clique no seu editor de HTML na lista de programas.

2

Carregue cada imagem em um array JavaScript. Por exemplo, o código a seguir cria uma matriz de duas imagens no servidor host da Web:

var background = new Matriz (); background [0] = "/images/bg1.gif"; background [1] = "/images/bg2.gif";

3

Gere um número aleatório. O número aleatório é usado para recuperar aleatoriamente uma imagem da matriz. Neste exemplo, duas imagens são carregadas, portanto você deve gerar um número entre 0 e 1. O código a seguir gera um número aleatório:

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

4

Exibe a imagem de fundo da matriz. O código a seguir combina a matriz de imagens e o número aleatório para exibir uma imagem aleatória como o plano de fundo do site:

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