©Geral Códigos 2015

quarta-feira, 13 de fevereiro de 2013

Trocar imagens aleatóriamente com atualização da página


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.
Postagem mais recente Postagem mais antiga Página inicial

0 comentários:

Postar um comentário

Copyright © Geral Códigos | Traduzido Por: TheMegaTuto

Design by Igor Design | Pagina No Facebook: GC NO FACE