Home » » Geral » Imagem de cabeçalho aleatória

Imagem de cabeçalho aleatória

Geral January 29, 2008

Aqui vai um tutorial simples mas bastante útil de como criar imagens aleatórias. Penso que será extremamente útil para quem utilize a plataforma Blogger pois essa não permite o uso de plugins como o MovableType ou WordPress.
Primeiro é necessário ter várias imagens para funcionarem como fundo. Procurem no Google ou sites de fotos imagens relacionadas com o que pretendem.

Este deve ser o código CSS que existe na página do template do blog:

#header {
background:#476 url(”imagemdefundo.jpg”) no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}

De seguida vou criar um script que o que faz é criar um novo estilo de forma a substituir a propriedade «background». Caso o script não funcione, por qualquer motivo, a imagem definida no CSS irá aparecer.

// de seguida vamos preencher as posições do vector
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”

var random=Math.round(4*Math.random()); // aqui é criado um numero aleatório entre 0 e 4 que será relativo á posição do vector (array)

// de seguida vamos escrever o código na página
// banner[random] significa o vector banner na posição random definida anteriormente

document.write(”<style>”);
document.write(”#header {”);
document.write(’ background:url(”‘ + banner[random] + ‘”) no-repeat left TOP;’);
document.write(” }”);
document.write(”</style>”);
</script>

Coloquem este script dentro da tag <head></head> e deverá funcionar. Verifiquem se o vosso cabeçalho tem o nome de header, caso não tenha terá de alterar isso no script.

E pronto, se fizeram tudo correctamente agora cada vez que a página for carregada deverá aparecer uma imagem aleatória. Para testar basta carregar na tecla F5 no vosso blog.

Partilha esta entrada: