Imagem de fundo aleatória
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:
<script type=”text/javascript”>
var banner= new Array()
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.
1 Comment(s)
Comments RSS TrackBack Identifier URI
Leave a comment
[...] Imagem de fundo aleatória - Mais um bom tutorial [...]