Bem, como eu disse num tópico meu na seção de Avaliação de Sistemas, sobre o meu banner rotativo em JS, eu vou explicar a segunda versão dele.
O script é esse:
<script language="JavaScript">
<!--
function MostraBanner() {
if (document.getElementById("ban").style.display == "none") {
document.getElementById("ban").style.display= "block";
}
else {
document.getElementById("ban").style.display = "none";
}
}
//-->
</script>
<script language="javascript">
<!--
// Criado por Fernando Martins de Toledo - without_toledo@hotmail.com
function banner() {
banners=new Array(5);
for (i=0; i<=banners.length-1; i++) {
banners[i]=new Array(2);
}
banners[0][0]="Webmasters Online";
banners[0][1]="http://www.wmonline.com.br";
banners[0][2]="banner1.gif";
banners[1][0]="Fórum Webmasters Online";
banners[1][1]="http://forum.wmonline.com.br";
banners[1][2]="banner2.gif";
banners[2][0]="Without's Scripts";
banners[2][1]="http://withoutscript...com/index.php";
banners[2][2]="banner3.gif";
banners[3][0]="Cadê?";
banners[3][1]="http://br.cade.yahoo.com";
banners[3][2]="banner4.gif";
banners[4][0]="Aonde?";
banners[4][1]="http://www.aonde.com.br";
banners[4][2]="banner5.gif";
j=parseInt(Math.random() * banners.length);
document.write("<div align='center' id='ban' name='ban' style='position:absolute; display:block; left:150px; top:50px;'>");
document.write("<a href='"+banners[j][1]+"' target='_blank'><img alt='"+banners[j][0]+"' src='"+banners[j][2]+"' border='0' width='468' height='60'></a>");
document.write("<br>");
document.write("<a href='"+banners[j][1]+"' target='_blank'>");
document.write(banners[j][0]);
document.write("</a></div>");
}
//-->
</script>
<script language="javascript">
<!--
banner();
//-->
</script>
<input type="checkbox" onclick="MostraBanner();">Esconder/Mostrar Banner
Agora, vamos por partes:
Veja o primeiro script:
<script language="JavaScript">
<!--
function MostraBanner() {
if (document.getElementById("ban").style.display == "none") {
document.getElementById("ban").style.display= "block";
}
else {
document.getElementById("ban").style.display = "none";
}
}
//-->
</script>
Eu criei uma função chamada MostraBanner(), que verificará se o elemento ban (esse é o id dele), está oculto. Se estiver, ele o exibirá.
Caso contrário, irá ocultá-lo, como o botão de Resposta Rápida do Fórum.
O segundo script:
<script language="javascript">
<!--
// Criado por Fernando Martins de Toledo - without_toledo@hotmail.com
function banner() {
banners=new Array(5);
for (i=0; i<=banners.length-1; i++) {
banners[i]=new Array(2);
}
banners[0][0]="Webmasters Online";
banners[0][1]="http://www.wmonline.com.br";
banners[0][2]="banner1.gif";
banners[1][0]="Fórum Webmasters Online";
banners[1][1]="http://forum.wmonline.com.br";
banners[1][2]="banner2.gif";
banners[2][0]="Without's Scripts";
banners[2][1]="http://withoutscript...com/index.php";
banners[2][2]="banner3.gif";
banners[3][0]="Cadê?";
banners[3][1]="http://br.cade.yahoo.com";
banners[3][2]="banner4.gif";
banners[4][0]="Aonde?";
banners[4][1]="http://www.aonde.com.br";
banners[4][2]="banner5.gif";
j=parseInt(Math.random() * banners.length);
document.write("<div align='center' id='ban' name='ban' style='position:absolute; display:block; left:150px; top:50px;'>");
document.write("<a href='"+banners[j][1]+"' target='_blank'><img alt='"+banners[j][0]+"' src='"+banners[j][2]+"' border='0' width='468' height='60'></a>");
document.write("<br>");
document.write("<a href='"+banners[j][1]+"' target='_blank'>");
document.write(banners[j][0]);
document.write("</a></div>");
}
//-->
</script>
Aí é que é a chave do negócio.
Criei uma função chamada banner(), que, inicialmente, terá um array (banners), sem um valor definido.
Logo, criei um laço FOR (poderia ser do, while também, mas esse é o mais simples), definindo o primeiro valor do array (0) e a futura quantidade de banners definida futuramente - 1. Eu poderia retirar o operador <= e colocar apenas <, retirando o -1.
Nos comando que o laço for executará, será o banner, de concatenação i:
banners[i]=new Array(2);
Pronto, agora criamos um array bidimensional.
Observe agora esse trecho:
banners[0][0]="Webmasters Online";
banners[0][1]="http://www.wmonline.com.br";
banners[0][2]="banner1.gif";
banners[1][0]="Fórum Webmasters Online";
banners[1][1]="http://forum.wmonline.com.br";
banners[1][2]="banner2.gif";
banners[2][0]="Without's Scripts";
banners[2][1]="http://withoutscript...com/index.php";
banners[2][2]="banner3.gif";
banners[3][0]="Cadê?";
banners[3][1]="http://br.cade.yahoo.com";
banners[3][2]="banner4.gif";
banners[4][0]="Aonde?";
banners[4][1]="http://www.aonde.com.br";
banners[4][2]="banner5.gif";
Eu defini o nome do site, a url e a imagem do banner, a partir de um array bidimensional, pois assim facilitaria meu trampo, ao invés de criar array por array.
Observe agora:
j=parseInt(Math.random() * banners.length);
Eu defini a variável j para arredondar um número aleatório que será sorteado entre a quantidade de banners existentes. Para que arredondar?
Porque o Math.random() escolhe um número dentre 0 e 1 (ou seja, pode ser 0,00000000000000000000005).
Agora, escrevemos no documento:
document.write("<div align='center' id='ban' name='ban' style='position:absolute; display:block; left:150px; top:50px;'>");
document.write("<a href='"+banners[j][1]+"' target='_blank'><img alt='"+banners[j][0]+"' src='"+banners[j][2]+"' border='0' width='468' height='60'></a>");
document.write("<br>");
document.write("<a href='"+banners[j][1]+"' target='_blank'>");
document.write(banners[j][0]);
document.write("</a></div>");
Criei um div, de id ban, que será usado para a exibição/ocultação do mesmo. Defini sua posição na página a partir dos parâmetros css (left, top e position), junto com a exibição do banner (display).
Também escrevi uma âncora (<a>), que irá pegar o endereço do site, que irá abrir numa nova janela.
A imagem exibirá a descrição, que é o nome do site. A imagem será definida no atributo src da imagem.
Depois, fiz uma outra âncora, que irá redirecionar numa nova janela, ao site sorteado.
Fechei o div e a tag a.
Outra parte:
<script language="javascript">
<!--
banner();
//-->
</script>
Executa o script banner();
Depois, apenas criei um checkbox, que irá definir se a pessoa quer ou não que o banner seja mostrado.
Bem, então é isso. quaisquer dúvidas, postem.
