A Pesquisa
Procurei sobre o que se falava de background rotativo no google muito mais pela questão do CSS do que pela atualização técnica e vi que tem gente querendo complicar uma coisa que nasceu simples.
Gente de Deus (!!!)
Pra se fazer um bg rotativo em PHP alguns passos devem ser seguidos:
- Coloque as imagens do BG em uma pasta – aqui nós vamos usar a pasta “imagensBG/“, mas você pode usar o que quiser na sua casa;
- No arquivo PHP, crie um array com os caminhos dessas imagens;
- Randomize esse array e pegue o valor;
- Coloque este valor no CSS.
Não é fácil?
Então, vamos lá
se o seu arquivo php necessitar compatibilidade com o php4, você deve semear um randomizador.
use esse código aqui:
srand((float) microtime() * 10000000); //semeia uma aleatoriedade - compativel com PHP 4
agora crie a lista de imagens no array ( PASSO 2 – ver lá em cima =) ):
//define a lista de imagens
$fileList[] = 'imagensBG/imagem1.jpg';
$fileList[] = 'imagensBG/imagem2.jpg';
$fileList[] = 'imagensBG/imagem3.jpg';
$fileList[] = 'imagensBG/imagem4.jpg';
pra não ficar MUITO zuado, crie uma verificação simples
// verifica se a lista é maior que zero
if (count($fileList) > 0) {
$img = $fileList[array_rand($fileList)];
} else {
exit("Ocorreu um erro na geração do background");
}
Nesse ponto você já tem o caminho do seu background em uma variável chamada $img, certo?
Agora crie o CSS
<style type="text/css">
<!--
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
background-color: #000000;
background-attachment: fixed;
background-image: url(<?php echo $img ; ?>);
background-repeat: no-repeat;
background-position: 50% 50%;
}
-->
</style>
Repare que no código acima você está chamando a variável que contém o caminho da imagem randomizada. Fácil, não?!
Já acabou.
Esperava mais???
Pois é. Tem gente que sopra muita areia onde nem praia existe.
Agora, se você quiser um negócio mais elaborado, etc e tal, eu sugiro o tutorial do Dan Benjamin sobre a randomização no PHP. Lá tem um arquivinho bacana que me deu umas coisas a pensar.
Sobre uso de GD, inclusive, que é muito mais classudo.
O código pra vocês testarem uma versão final do randomizador de background simples está aí abaixo:
<?php
srand((float) microtime() * 10000000); //semeia uma aleatoriedade - compativel com PHP 4
//define a lista de imagens
$fileList[] = 'imagensBG/imagem1.jpg';
$fileList[] = 'imagensBG/imagem2.jpg';
$fileList[] = 'imagensBG/imagem3.jpg';
$fileList[] = 'imagensBG/imagem4.jpg';
// verifica se a lista é maior que zero
if (count($fileList) > 0) {
$img = $fileList[array_rand($fileList)];
} else {
exit("Ocorreu um erro na geração do background");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="fundo rotativo, php" />
<meta name="author" content="Diogo Besson - diogobfernandes[at]gmail[dot]com" />
<title>Teste de Fundo Rotativo</title>
<style type="text/css">
<!--
<?php
// CRIA O BACKGROUND. OOOOOOH!!!!
?>
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
background-color: #000000;
background-attachment: fixed;
background-image: url(<?php echo $img ; ?>);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#content {
height: 400px;
width: 200px;
border: 1px dotted #CCFFCC;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bolder;
color: #FFFFFF;
text-decoration: none;
background-color: #000000;
margin-left: auto;
margin-right: auto;
margin-top: 120px;
}
-->
</style>
</head>
<body>
<div id="content">
<p>
Aqui vai o conteúdo do site em uma tripinha bem bacana.</p>
<p> </p>
<p>Aqui vai o conteúdo do site em uma tripinha bem bacana.</p>
<p></p>
<p>Aqui vai o conteúdo do site em uma tripinha bem bacana.</p>
<p> </p>
<p>Aqui vai o conteúdo do site em uma tripinha bem bacana.</p>
<p></p>
</div>
</body>
</html>
Outra coisa:
Essa lógica pode ser usada pra criar banner randômico também se você não tiver a fim de ter um servidor openX rodando na sua máquina. As possibilidades podem crescer dependendo da sua imaginação e necessidade.
Vamos ressucitar esse blog, né pessoal?
=)
abraço!
