rafael gimenes.net

Hoje eu dei uma dica na lista wpbrasil, de como fazer uma imagem em seu site ficar aleatória, como a dica se tratava Wordpress que é feito em php então fiz um script simples em php mesmo, mas vou abordar aqui de como fazer isso em javascript caso seu site só utilize html ou outra linguagem.

# EM PHP

Crie 10 imagens chamadas assim
foto1.jpg foto2.jpg foto3.jpg e assim vai até o foto10.jpg e jogue em algum diretório do seu server.
No arquivo que deseja mostrar as imagens(geralmente sidebar do seu tema se usa Wordpress), você terá que colocar no topo do arquivo a seguinte instrução php.
<?
$imgdavez=rand(1,10);
?>
Explicando essa função vai pegar e sortear um número aleatório de 1 a 10, pois temos imagens nessa sequência de números, aprenda mais sobre a função rand.E bem na parte que você queira que apareça sua imagem você insere esta linha.

<img src=”pastaOndeVcColocouAsIamgens/foto<? echo $imgdavez ?>.jpg”>

Simples assim, você pode ter as imagens em outro server, basta apenas usar a url toda da imagem.

EM JAVA SCRIPT

É um pouco mais chato crie um arquivo JS, chamado “imgaleatoria.js” e cole o seguinte conteudo:

//inicio do arquivo

//para exibir a imagem eu seu site coloque a linha baixo
//<script language=”Javascript”src=”imgaleatoria.js”></script>
//descobrindo o browser
var ie=document.all&&navigator.userAgent.indexOf(”Opera”)==-1
var dom=document.getElementById&&navigator.userAgent.indexOf(”Opera”)==-1
//propriedades do iframe, mude-as de acordo com sua necessidade
var iframeprops=’width=363 height=246 marginwidth=”0″ marginheight=”0″ hspace=”0″ vspace=”0″ frameborder=”0″ scrolling=”no”‘
//definindo as urls das imagens disponives
var randomcontent=new Array()
randomcontent[0]=”images/imagem01.jpg”
randomcontent[1]=”images/imagem02.jpg”
randomcontent[2]=”images/imagem03.jpg”
randomcontent[3]=”images/imagem04.jpg”
//basta criar novas linha nessa array seguindo a mesma estrutura
//estrutura do iframe conforme o browser
if (ie||dom)
document.write(’<iframe id=”dynstuff” src=”" ‘+iframeprops+’></iframe>’)
function random_iframe(){
if (ie||dom){
var iframeobj=document.getElementById? document.getElementById(”dynstuff”) : document.all.dynstuff
iframeobj.src=randomcontent[Math.floor(Math.random()*randomcontent.length)]
}
}
window.onload=random_iframe
//fim do arquivo

Agora é simples aonde você quer que apareça a imagem aleatória coloque esta linha
<script language=”Javascript”src=”imgaleatoria.js”></script>

Ps: Lembre-se de colocar esse script (imgaleatoria.js), na mesma pasta do seu arquivo html ou então especifique o caminho correto na tag acima.

Eu adorava usar isso no kornbrasil.com e achava o máximo, agora isso é bem manjado e muito útil. Acredito que é uma questão simples mas agente sempre esquece de como se faz, com isso você pode deixar seu site mais interativo e animado, e também é possível usar estas mesmas funções para outras coisas, como frases aleatórias, links aleatórios ae vai da sua imaginação.

Esse post foi publicado de sexta-feira, 23 de fevereiro de 2007 às 7:28 am, e arquivado em java script, php, tec. Você pode acompanhar os comentários desse post através do feed RSS 2.0. Você pode comentar ou mandar um trackback do seu site pra cá.