Oi!

Introdução

Bem, muitas vezes você já deve ter visto em alguns sites, blogs etc um efeito que a cada atualização da página atual alguma imagem alterava-se. Isso é um script, que porém, muito fácil! E como sempre, abordarei ele aqui!

Informações
Programa utilizado:
Nenhum
Subcategoria: Imagens, Melhorias
Nível de dificuldade: Fácil
Resultado final: Aqui

Tutorial

1. Comece criando as imagens que serão trocadas automaticamente. Lembrando que, não tem limite de quantas imagens você pode usar.

2. Hospede-as no seu hospedeiro de imagens ou na sua própria hospedagem, se caso você tenha. E guarde todas as URL's que forem dadas.

3. Agora copie o código logo abaixo:

<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="#"><img src="IMAGEM1"/></a>'
quotes[1]='<a href="#"><img src="IMAGEM2"/></a>'
quotes[2]='<a href="#"><img src="IMAGEM3"/></a>'
quotes[3]='<a href="#"><img src="IMAGEM4"/></a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>


Se caso você queira colocar mais imagens basta adicionar abaixo de cada "quotes" mais uma linha como essa:

quotes[?]='<a href="#"><img src="IMAGEM?"/></a>'


Entre os colchetes ([]) de "quotes" você colocará o número sucessor dá última linha do código, por exemplo:

Suponhamos que a última linha do nosso código seja um "quotes[3]". Ao adicionarmos mais uma linha, iremos colocar obviamente "quotes[4]" e assim respectivamente.

4. E vá à Layout > Elementos de página > Adicionar um Gadget > HTML/JavaScript e cole o código com os endereços (opcional) que a imagem irá "levar" e suas respectivas URL's. E coloque o Gadget aonde você desejar, sem esquecer de respeitar a largura das imagens, relacionando-as com a largura de determinada DIV que a Gadget será adicionada. Finalize clicando em Salvar!

E veja aqui o nosso código em funcionamento.


Vlw!


Original de: Tuto de Tudo
Se caso você viu este post em outro blog, site, etc sem seus devidos créditos. Denuncie-o clicando aqui.

4 comentários:

Deison RC disse...

Mano, como eu vou fazer pra colocar igual no seu exemplo aí pra abrir em uma nova aba sendo que as imagens ficam no gadgets?

Anônimo disse...

muito obrigado, era o que eu estava procurando, facil e funcional! vlww

PORTAL INÚBIA disse...

AS FOTOS Ñ PASSARAM ALEATORIAMENTE Ñ SEI PORQUE>

rodrigo disse...

Olá man obrigado pelo post. Poderia ensinar como mudar o posicionamento da imagem aleatoriamente. obg!!

© 2008
Tuto de Tudo
Todos os direitos reservados.