Tuto de Tudo

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.