Neste artigo/tutorial explicaremos como criar um sistema de banner rotativo. Esse sistema pode ser usado para se fazer troca de banners entre sites ou como espaço de publicidade em geral.
Vamos ao código:
<script language="Javascript">
hoje = new Date()
numero_de_imagens = 2
segundos = hoje.getSeconds()
numero = segundos % numero_de_imagens
if(numero == 0) {
banner = "http://www.seusite.com/imagem.extensao"
link = "http://www.linkdobanner.com/"
alvo = "out"
texto = "banner"
}
if(numero == 01) {
banner = "http://www.seusite.com/imagem.extensao"
link = "http://www.linkdobanner.com/"
alvo = "out"
texto = "banner"
}
document.write('<a href="' + link + '" target="' + alvo + '">
<img src="' + banner + '" alt="' + texto + '" width="468"
height="60" border="0"></a>')</script>
Agora, veremos as partes do código que você poderá configurar e alterar para deixar o sistema do jeito que você necessita:
numero_de_imagens = 2
Nessa parte do código você deverá setar o número de imagens de banners que funcionaram no sistema.
banner = "http://www.seusite.com/imagem.extensao"
Nessas partes do código você deverá setar o url do seu site onde se encontra a imagem do banner e a extensão dessa mesma imagem.
link = "http://www.linkdobanner.com/"
Nessas partes do código você deverá setar o url do site para onde, o visitante que clicar no banner, será mandado.
texto = "banner"
Nessas partes do código você deverá setar/desetar o texto que aparecerá quando o visitante colocar o cursor do mouse sobre o banner.
A parte que você deve alterar limita-se a isso que foi repassado. Não aconselho a mudança em outras partes do código, a não ser as que foram relatadas mais acima, pois uma mudança errada pode fazer com que o código não funcione.
Você deve adicionar o código, já pronto, no lugar que seja de seu desejo na página.
Obs.: Esse sistema de banner rotativo não se limita a apenas se setar duas imagens de banner no sistema, você pode setar quantas necessitar. No exemplo empregado neste artigo, estão sendo utilizadas duas imagens. Para adicionar novas imagens, apenas adicione essa parte do código:
if(numero == 01) {
banner = "http://www.seusite.com/imagem.extensao"
link = "http://www.linkdobanner.com/"
alvo = "out"
texto = "banner"
}
No lugar de if (numero == 01){ você deve setar o número que seja seguinte ao do último banner do seu sistema, no nosso caso, se fossemos adicionar mais um banner ao código do sistema de banner rotativo apresentado no começo desse artigo, seria: if (numero == 03){.
Exemplo do código na página:
<html>
<head>
<title>Banner rotativo</title>
</head>
<body>
<script language="Javascript">
hoje = new Date()
numero_de_imagens = 2
segundos = hoje.getSeconds()
numero = segundos % numero_de_imagens
if(numero == 0) {
banner = "http://www.seusite.com/imagem.extensao"
link = "http://www.linkdobanner.com/"
alvo = "out"
texto = "banner"
}
if(numero == 01) {
banner = "http://www.seusite.com/imagem.extensao"
link = "http://www.linkdobanner.com/"
alvo = "out"
texto = "banner"
}
document.write('<a href="' + link + '" target="' + alvo + '">
<img src="' + banner + '" alt="' + texto + '" width="468"
height="60" border="0"></a>')</script>
</body>
</html>
