Imagem de cabeçalho aleatória
anúnciantes
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.
<script type=”text/javascript”>
var banner= new Array() // cria um vector (Array) chamado banner
// 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.
Lucas Loyola
September 29, 2008
Muito muito bom!
parabéns.
Felipe Sylar
May 17, 2009
Leo Alcantara
August 26, 2009
Amigo, estou com problema. No header de meu blog tem diferente do seu. O meu tem assim:
/* —– HEADER —– */
#header-wrapper {
margin: 7px 0px 7px 0px;
padding: 4px;
width: 970px;
background: $headerbgColor;
border: 1px solid $headerBorderColor;
}
#header {
width: 970px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}
#header h1 {
color: $blogTitleColor;
font: $blogTitleFont;
font-variant: small-caps;
margin: 0px 0px 0px 0px;
padding: 10px 20px 0px 20px;
}
#header h1 a {
text-decoration: none;
color: $blogTitleColor;
}
#header h1 a:hover {
text-decoration: underline;
color: $blogDescriptionColor;
}
#header .description {
color: $blogDescriptionColor;
font: $blogDescriptionFont;
margin: 0px 0px 0px 0px;
padding: 1px 20px 25px 20px;
}
#header h1 p, #header .description p {margin:0;padding:0}
#header a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}
Vitor
September 3, 2009
Pstei um codigo a cima mas nao apareceu adireito estou postando mais uma vez.
var bg= new Array() // cria um vector (Array) chamado bg
// de seguida vamos preencher as posições do vector
bg[0]=”imagem/bg1.jpg”
bg[1]=”imagem/bg2.jpg”
bg[2]=”imagem/bg3.jpg”
var random=Math.round(2*Math.random()); // aqui é criado um numero aleatório entre 0 e 2 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(“”);
document.write(“#head{“);
document.write(‘background: url(“‘+ bg[random] +’”) no-repeat;’);
document.write(“}”);
document.write(“”);