Como criar banner rotativo

2
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

Transcript of Como criar banner rotativo

Page 1: Como criar banner rotativo

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

Page 2: Como criar banner rotativo

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, [email protected] Abraços, Emilio n. (www.lararodrigues.tk)