Você já acessou aquele site que a cada atualizada que você dava ele mudava a imagem da header sozinha? Achou legal? Pois bem, hoje iremos aprender a fazer isso! 🙂
É algo bastante fácil de fazer, então você não terá problemas para entender. A “mágica” dessa troca se dá ao uso da função mt_rand, ou até mesmo a rand do PHP, que se encarrega de sortear as headers.
Supondo que você tenha quatro headers: header1.jpg, header2.jpg, header3.jpg e header4.jpg, nós criaremos à variável header e colocaremos um mt_rand de zero a três, que acaba totalizando as nossas quatro headers (contando com o zero).
$header = mt_rand(0,3);
Agora iremos criar uma estrutura condicional com o switch para testar cada valor sorteado pela variável $header e mostrar a header sorteada.
switch ($header){ case 0: echo '<img src="header1.jpg" alt="header" />' ; break; case 1: echo '<img src="header2.jpg" alt="header" />' ; break; case 2: echo '<img src="header3.jpg" alt="header" />' ; break; case 3: echo '<img src="header4.jpg" alt="header" />' ; break; }
Pronto, agora é só colocar o script php na sua página exatamente no local onde a header deve estar e testá-lo.
Mas, ai você me pergunta: – Dalton, e se eu tiver muitas imagens, terei que fazer várias cases para elas? Afinal, isso seria muito trabalhoso…
Eu lhe respondo: – Não, para isso lhes darei uma fórmula “mágica” e com um código bem menor que o anterior. Código esse que não passa de duas miseras linhas e funciona de forma bem mais dinâmica que a outra. (Guardei o melhor para o final hehe) 😛
O código é esse:
$header = mt_rand(1,4); echo '<img src="header'.$header.'.jpg" alt="header" />' ;
Eu mudei o inicio do mt_rand para 1, pois a nossa primeira header começa com esse número, lembra? Perceba: header1.jpg
Em seguida, nós colocamos um echo e dentro dele o código XHTML para mostrar a imagem na página, mas note que eu concatenei a variável $header que possui o número sorteado de 1 à 4 entre o src=”header’ e o ‘.jpg”, fazendo com que o nome do arquivo a ser mostrado seja: header[valor sorteado que corresponde ao número dos nossos arquivos].jpg
Entendeu a “mágica”? rs… 😛
Supondo que você tenha 10 headers, basta ir ao mt_rand e colocar mt_rand(1,10)
Fácil, não?
Você pode fazer muitas outras coisas com o mt_rand em junção com o switch ou concatenando ele como mostrei.
Qualquer sugestão, comentário ou dúvida é muito bem vinda.
Abraços, até a próxima.
Você não tem um código para troca de HEADERS em javascript?
CurtirCurtir
Infelizmente não tenho, João. Mas em breve pretendo postar tutoriais de jQuery, e possivelmente farei um tutorial sobre Header aleatório com ele.
Abraços, fico te devendo.
CurtirCurtir
Estou com uma duvida, fiz este comando em php certo, agora gostaria de saber em que local deverei colocar o mesmo?
CurtirCurtir