Como criar banner rotativo
•
1 gostou•2,495 visualizações
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.
![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](https://image.slidesharecdn.com/comocriarbannerrotativo-150321044909-conversion-gate01/85/como-criar-banner-rotativo-1-320.jpg)
Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a Como criar banner rotativo
Semelhante a Como criar banner rotativo (20)
Mais de Nilson Oliveira
Mais de Nilson Oliveira (12)
Como criar banner rotativo
- 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)