rafael gimenes.net

nerdlife, rock and roll, aventuras motos e trips.

Imagem aleatória em seu site ou blog, php html java script

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.

14 Comentários to “Imagem aleatória em seu site ou blog, php html java script”

  1. Reche Says:
  2. Daniel Becher Says:

    Gostei da dica. Sempre quis fazer isso, mas nunca tinha ido atrás pra procurar. Hoje, vendo na lista do WP, achei o link.

    Fim de semana vou tentar mexer com isso aí..

    Abraço!

  3. w1zard Says:

    eu jah usava isso com html muito tempo atrás.. com javascript. realmente, ajuda mto a dar uma quebrada no visual. boa dica, a comunidade wp agradece.

  4. Célio Says:

    fui eu que havia perguntado sobre isso na lista… Muito obrigado pela dica!

  5. Gabriela Says:

    A dica é bacana. E, realmente, em php parece ser quinhentas vezes mais simples de se fazer o esquema :P

  6. EdpeppeRs Says:

    hahaha
    véio! c parece q adivinhou!
    puuuts!

    eu tava justamente pensando em fzr isso no novo layout do KB!!

    :D

  7. BstCredtCord Says:

    I am at a loss. I am looking to apply for a car loan but my current credit is not enough for that. I have learnt that I can actually buy good credit history and so improve my credit score. But I am afraid I may delay a payment and do a bad turn to both – the seller of credit history and myself. Maybe it’s better to apply for a secured card at

    no credit check credit cards with no income verification

    mc216d

  8. eregilkibly Says:

    E’ possibile acquistare il Cialis online, in modo sicuro e anonimo, e risparmiare sul suo costo commerciale. Generic Cialis (Tadalafil) e’ un trattamento per gli uomini con disfunzione erettile (Impotence). Generic Cialis aiuta di aumentare circolizazione del In the old days, Viagra was the dominating drug in curing impotence. But nowadays there are new Viagra alternatives appearing on the market. comprare viagra on line

  9. eregilkibly Says:

    C: La disfunzione sessuale non e meglio attribuibile ad un altro disturbo psichiatrico (ad eccezione di un’altra disfunzione sessuale) e non e dovuta esclusivamente agli Disfunzione Erectile: comprare il viagra cialis levitra gene
    rico in linea. Viagra Cialis Levitra pillole senza ricetta poco costoso. Accettiamo Visa, Mastercard. deutsch italiano Forum Topics Posts Last Post ; Test category 1 : Test Forum 1 CHICAGO - Potrebbe esserci un nesso tra il Viagra , il Cialis e alcuni casi di cecita. dove vendita cialis

  10. eregilkibly Says:

    Fruher warnte man die Manner davor, ihre Spermien nutzlos zu verschleudern. online sildenafil bestellen

  11. kely Says:

    Thank you sooooo much!o

  12. Bush Says:

    Fascinating site and well worth the visit. I will be backd

  13. KizElinirlJip Says:
  14. Duhshanquen Says:

    oh yeah, one more thing Are you encouraging my blue assertion Wanna joke?) What did one hot dog say to another? Hi, Frank!

Mande um Comentário