Criando sistema de banner rotativo

Hoje iremos aprender a criar nosso proprio sistema de banner rotativo em HTML (com linguagem javascript), Calma não se assuste..

1º passo: Abra o Frontpage, Dreamweaver ou um Editor Html (bloco de notas serve)
2º passo: Estrutura basica para sua pagina

<html>
<head>
<title>Banner rotativo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" topmargin=0 leftmargin=0 text="#000000">
<table width="120" border="0" cellspacing="0" cellpadding="0" height="60" bordercolor="#000000">
  <tr> 
    <td>
      <div align="center">Inserir aqui o codigo no proximo passo</div>
    </td>
  </tr>
</table>
</body>
</html>

3º passo: Salve acima como "rotate.htm"
4º passo: Abra o arquivo que acabou de salvar e vamos inserir o codigo que ja deixei pronto para vcs:

<script language="JavaScript">
function Banners()
{
    var MNews = new Array(); 
    MNews[0]= '<A HREF="http://www.codigofonte.net" target="_blank"><IMG SRC="http://codigofonte.net/img/banner120.gif"  WIDTH=120 HEIGHT=60 BORDER=0 ALT="Texto alternativo"></a>'
    MNews[1]= '<A HREF="http://www.codigofonte.net" target="_blank"><IMG SRC="http://codigofonte.net/img/banner468.gif"  WIDTH=120 HEIGHT=60 BORDER=0 ALT="Manuela do Monte"></a>'

   var Numero = Math.floor(Math.random()*2);
   document.write(MNews[Numero]);
}
</script>
<script language="JavaScript">
Veja_Banner = Banners();
</script>

Obs: Na linha "MNews[1]" e "MNews[0]" esta um exemplo de banner para que veja ele funcionando apos salvar o arquivo.

5º passo: Salve novamente este arquivo "rotate.htm" e agora vamos publica-lo.
6º passo: Vamos inserir na página para visualização dos banners, cada vez que atualiza a pagina muda o banner.

<iframe src ='rotate.htm' width='120' height='60' frameborder='0' border='0' marginheight='0' marginwidth='0' scrolling='no'></iframe>

* Este é um "IFrame", um quadro que ficará dentro da sua pagina, ele tem tamanho 120 x 60 igual ao banner, altere as configurações do banner no arquivo "rotate.htm" neste codigo do frame altere o nome do arquivo que estão as configurações do banner, no caso "rotate.htm"

Meu e-mail, Jetcarro@terra.com
Abraços,
Emilio n. (www.lararodrigues.tk)

Enviar um Artigo