Fev
21
2008

Imagem de fundo aleatória

An article by Mario Andrade

Este tutorial é bastante idêntico ao tutorial de imagem de cabeçalho aleatória! Se já o viram então vamos usar o mesmo código mas com uma pequena diferença.

Antes demais é importante definir um estilo para o fundo do site em CSS. Isto irá garantir um fundo mesmo que o browser não suporte JavaScript.

Em seguida dirijam-se á secção <head> do vosso site e coloquem o seguinte código:

banner[0]=”endereço da imagem”
banner[1]=”endereço da imagem”
banner[2]=”endereço da imagem”
banner[3]=”endereço da imagem”
banner[4]=”endereço da imagem”

//Para adiconar imagens basta copiar a ultima linha (banner[4]=”endereço da imagem”) e adicionarem a posição do vector com o endereço da imagem (banner[5]=”endereço da imagem”);

var random=Math.round(4*Math.random());

document.write(“<style>”);
document.write(“body {“);
document.write(‘ background:url(“‘ + banner[random] + ‘”) center;’);
document.write(” }”);
document.write(“</style>”);
</script>

Agora guardem as alterações e testem carregando na tecla F5 do teclado. Se fizeram tudo correctamente o vosso fundo é alterado cada vez que a página for carregada.
Como bom principio não devem usar imagens muitos grandes (>500kb) nem imagens animadas pois poderão fazer com que o tempo de carregamento do site seja demasiado e o leitor se canse de esperar.

Etiquetas:fundo aleatório