A exibição aleatória de imagens é uma técnica muito utilizada. Por exemplo, banners aleatórios são exibidos quando você entra em um site, seu banner é sempre diferente, ou sempre há dicas com conteúdos diferentes. Usando essa tecnologia, não apenas é possível colocar mais conteúdo em um determinado espaço, mas também dar às pessoas a ilusão de atualizações frequentes.
Quão animado você está? Na verdade, desde que você tenha um pouco de conhecimento básico de html e javascript, tudo é muito simples. siga-me e vamos dar uma olhada em seus segredos aleatórios.
Vamos começar com um exemplo simples. Normalmente adicionamos imagens à página usando <img src="picture">. Se quisermos exibir aleatoriamente 3 imagens diferentes, precisamos fazer uma pequena modificação neste código. Primeiro, adicione a tag <script>:
O seguinte é um fragmento citado:
<linguagem script=javascript></script>
Em seguida, coloque <img src="picture"> nesta tag usando document.write(""), e ela se tornará
document.write("<img src=imagem>")
Agora vamos terminar o parágrafo mais crítico:
Aqui está a citação:
id=Math.round(Math.random()*2)+1
Desta forma, os números aleatórios são obtidos como 1, 2 e 3. Renomeie a imagem que deseja exibir para 1.gif, 2.gif, 3.gif, ok! O código final é:
Aqui está o trecho de citação:
<linguagem de script=javascript>
id=Math.round(Math.random()*2)+1
document.write("<img src="+id+".gif>")
</script>
Experimente, não é bom? E daí se cada uma das minhas fotos corresponder a um hiperlink?
Vamos supor que existam 3 imagens, 1.gif, 2.gif, 3.gif, e os links correspondentes sejam url1, url2 e url3.
Para ter uma correspondência um-a-um entre imagens e links, precisamos configurar uma imagem de array para colocar o endereço do link, da seguinte forma:
O seguinte é um fragmento de referência:
var imagem=nova matriz(3)
imagem.comprimento=3
imagem[1]="url1"
imagem[2]="url2"
imagem[3]="url3"
Para obter o link correspondente à imagem, também precisamos definir um array imageurl=image[id]
O princípio é este:
Quando a página é lida, um número aleatório é obtido, assumindo que seja 2, ou seja, id=2, então podemos facilmente exibir 2.gif na página como acima. Então podemos ver: imageurl=image[2] e image[2]="url2", o resto é fácil. O código completo é o seguinte:
A seguir está um fragmento entre aspas:
<linguagem de script=javascript>
var imagem=nova matriz(3)
imagem.comprimento=3
imagem[1]="url1"
imagem[2]="url2"
imagem[3]="url3"
id=Math.round(Math.random()*2)+1
URL da imagem=imagem[id]
document.write("<a href="+bannerurl+">"+"<img src="+id+".gif>")
</script>
Reimpresso de: Seven Color Bird Design --- pc-king