Como estou reduzindo o uso de plugins, precisei de um script para rotacionar banners. Encontrei um Javascript bem simples e que serviu perfeitamente ao meu caso. Com poucas linhas de código, serão exibidas imagens aleatórias cada vez que a página for recarregada. É bem fácil editá-lo, mesmo que você não entenda nada de programação.
Note que a exibição não é exatamente “rotativa”, não há ordem definida. Ou seja: seus leitores poderão casualmente ver o mesmo banner várias vezes seguidas. Na verdade, como verá mais abaixo, a exibição é definida pelo método get.Seconds, que pega os segundos do sistema. É meio na “loteria”, portanto indicado para apresentação de muitos banners.
Vamos supor que você tem três banners e quer exibi-los aleatoriamente. Depois de hospedá-lo em algum lugar, terá os URLs, algo como:
http://www.seuservidor.com/banner1.jpg
http://www.seuservidor.com/banner2.jpg
http://www.seuservidor.com/banner3.jpg
Esse é o código.
<!-- This Script Free To Use Providing This Notice Remains This Script Has Been In The http://www.DesignerWiz.com Javascript Public Archive Library NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply --> <script type="text/javascript" language="JavaScript"> var how_many_ads = 3; var now = new Date() var sec = now.getSeconds() var ad = sec % how_many_ads; ad +=1; if (ad==1) { txt="Esse é o banner 1"; url="http://www.seuservidor.com/banner1.jpg"; alt="Banner 1"; banner="http://www.seuservidor.com/banner1.jpg"; width="250"; height="250"; } if (ad==2) { txt="Olá, sou o banner 2."; url="http://www.seuservidor.com/banner2.jpg"; alt="Banner 2"; banner="http://www.seuservidor.com/banner2.jpg"; width="250"; height="250"; } if (ad==3) { txt="Eu sou o banner 3"; url="http://www.seuservidor.com/banner3.jpg"; alt="Banner 3"; banner="http://www.seuservidor.com/banner3.jpg"; width="250"; height="250"; } document.write('<a title="' + txt + '" rel="nofollow" href="' + url + '" target="_blank">'); document.write('<img src="' + banner + '" width=') document.write(width + ' height=' + height + ' '); document.write('alt="' + alt + '" border="0">'); document.write('</a>'); </script>
Como editar
Tudo que você precisa fazer é:
- Em var how_many_ads, insira o número de banners que serão exibidos. No nosso exemplo, são 3 mesmo.
- Em txt: o atributo title do link.
- Em url: link apontado pelo banner.
- Em alt: texto alternativo, aparece quando a imagem não é carregada e, em quase todos os navegadores, quando o mouse passa sobre a imagem.
- Em banner: o url do banner.
- Em width: largura do banner.
- Em height: altura do banner.
Fora isso, não mude mais nada. Coloque todo o código no lugar em que quer exibir os banners. Como dito antes, o sistema não rotaciona os banners de forma alternada, mas aleatoriamente. A sequência pode ser 1, 1, 1, 3, 2, 3 e não 1, 2, 3, 1, 2, 3, etc.
Você pode estilizar normalmente os banners, basta envolver o código por uma div, por exemplo, e aplicar nela padding, margin ou outros atributos de CSS.
Os links abrem, por padrão, em uma nova janela; se quiser que abram na mesma janela, basta remover o trecho target=”_blank”
Veja o código em funcionamento abaixo. Atualizando a página, outros banners serão exibidos (se repetir, atualize de novo).
Para exibir mais imagens, basta criar outro bloco de “if”, e aumentar o número de imagens na variável how_many_ads.
Se tiverem dúvidas, comentem.
6 Comments
Cara parabéns, funciona perfeitamente.
Daniel o código não está aparecendo aqui no post.
Abraços!!!
Como acabei de migrar o Blog Aprendiz pra cá, alguns posts vieram com erro, vai levar um tempo até arrumar tudo… Mas valeu, já consertei esse.
Por isso que quando acessava o Blog Aprendiz era redirecionado pra cá rs.
fala awe queria saber se tem como fazer isso com sites ( url’s ) se tiver tem como me enviar pelo e-mail como html ok poo vlw!!
Funcionou perfeitamente.
Excelente dica.