Este documento fornece instruções passo-a-passo para criar um sistema de banner rotativo em HTML usando JavaScript. Ele explica como estruturar a página HTML, inserir código JavaScript para alternar entre banners aleatoriamente e incorporar o banner rotativo em uma página usando um iframe.
1. 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
2. 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)