Como mostrar uma imagem diferente no Header

 

 

Enviado para você por Penha através do Google Reader:

 

 

Como mostrar uma imagem diferente no Header

via MUIOMUIO.NET de Mario Andrade em 17/12/08

Este tutorial é um tutorial de PHP, como tal é suportado por todos os sites cujo alojamento suporte PHP.
Neste tutorial vou dar duas opções mas recomendo seriamente que puxes asas á imaginação e aproveites ao máximo.

O primeiro passo é editares o ficheiro header.php do teu blog
Procuras a zona do cabeçalho e lá dentro vais escrever o código PHP que te vai buscar as imagens:

<?php
$numero=rand(1, 3);
if($numero=1){ ?>
<div id="header" style="background:transparent url(images/header1.png) no-repeat top left;">
<?php }
elseif($numero=2){ ?>
<div id="header" style="background:transparent url(images/header2.png) no-repeat top left;">
<?php }
elseif($numero=3){ ?>
<div id="header" style="background:transparent url(images/header3.png) no-repeat top left;">
<?php } ?>

O que este código faz é gerir um número ao calhas com a função rand() do php, baseando-se no número irá mostrar uma imagem.

Mas vamos tornar as coisas mais interessantes, vamos criar o tutorial de forma a que mostre uma imagem de acordo com a altura do dia.
Os passos são os mesmos apenas com algumas alterações no código:

<?php
$numero=date(H);
if($numero>=9 && $numero<12){ ?>
<div id="header" style="background:transparent url(images/manha.png) no-repeat top left;">
<?php }
elseif($numero>=12 && $numero<20) { ?>
<div id="header" style="background:transparent url(images/tarde.png) no-repeat top left;">
<?php }
elseif($numero>=20 && $numero<9) { ?<
<div id="header" style="background:transparent url(images/noite.png) no-repeat top left;">
<?php } ?>

Este código uso a função date() para determinar a hora e mostrar uma imagem entre as 9h e as 12h, outra a partir das 12h até as 20h, a partir das 20h até as 9h outra imagem. Desta forma o teu cabeçalho pode adaptar-se á altura do dia. Podes inclusive adicionar mais imagens para o amanhecer, entardecer, etc… ou mesmo usar este código para carregares CSS para adaptar o layout do teu site á altura do dia.

este tutorial foi adaptado do artigo How to display a random header image

 

 

Coisas que você pode fazer a partir daqui:

• Inscrever-se no MUIOMUIO.NET usando o Google Reader
• Comece a usar o Google Reader para manter-se facilmente atualizado com todos os seus sites favoritos

 

 

Share

Share |