SlideShare uma empresa Scribd logo
1 de 2
Baixar para ler offline
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)

Mais conteúdo relacionado

Mais procurados

Todo El Mundo Va
Todo El Mundo VaTodo El Mundo Va
Todo El Mundo Vacpralmun
 
ซาเสียวเอี้ย
ซาเสียวเอี้ยซาเสียวเอี้ย
ซาเสียวเอี้ยsornblog2u
 
TTF.MTMTE.30
TTF.MTMTE.30TTF.MTMTE.30
TTF.MTMTE.30Arcee327
 
The Fashion Business Manual (Fashionary International Limited) (z-lib.org).pdf
The Fashion Business Manual (Fashionary International Limited) (z-lib.org).pdfThe Fashion Business Manual (Fashionary International Limited) (z-lib.org).pdf
The Fashion Business Manual (Fashionary International Limited) (z-lib.org).pdfTunde Renner
 
TTF.MTMTE.43
TTF.MTMTE.43TTF.MTMTE.43
TTF.MTMTE.43Arcee327
 
002. Osveta BožAnstva Ra
002. Osveta BožAnstva Ra002. Osveta BožAnstva Ra
002. Osveta BožAnstva RaTompa *
 
Tex Willer Libellus Kolor Biblioteka 008 - Tajni klanac
Tex Willer Libellus Kolor Biblioteka 008 - Tajni klanacTex Willer Libellus Kolor Biblioteka 008 - Tajni klanac
Tex Willer Libellus Kolor Biblioteka 008 - Tajni klanacStripovizijacom
 
Revista DeMillus campanhas 11-12-13
Revista DeMillus campanhas 11-12-13Revista DeMillus campanhas 11-12-13
Revista DeMillus campanhas 11-12-13Raquel Elena
 
Dok holidej 208 kirk hamilton - bakskineri
Dok holidej 208   kirk hamilton - bakskineriDok holidej 208   kirk hamilton - bakskineri
Dok holidej 208 kirk hamilton - bakskinerizoran radovic
 
Vajat erp 079 vilijam mark - dodz siti u plamenu
Vajat erp 079   vilijam mark - dodz siti u plamenuVajat erp 079   vilijam mark - dodz siti u plamenu
Vajat erp 079 vilijam mark - dodz siti u plamenuzoran radovic
 
Dok holidej 122 jedan je suvisan
Dok holidej 122 jedan je suvisanDok holidej 122 jedan je suvisan
Dok holidej 122 jedan je suvisanzoran radovic
 
Dok holidej 192 kirk hamilton - sandens
Dok holidej 192   kirk hamilton - sandensDok holidej 192   kirk hamilton - sandens
Dok holidej 192 kirk hamilton - sandenszoran radovic
 
Zagor VC-072 Povratak Diging Bila
Zagor VC-072 Povratak Diging BilaZagor VC-072 Povratak Diging Bila
Zagor VC-072 Povratak Diging BilaStripovizijacom
 
Aster blistok 001 vitez beskraja
Aster blistok 001 vitez beskrajaAster blistok 001 vitez beskraja
Aster blistok 001 vitez beskrajaajdeprobaj
 
Zagor l 268 planine od leda
Zagor l 268   planine od ledaZagor l 268   planine od leda
Zagor l 268 planine od ledaStripovizijacom
 

Mais procurados (20)

Todo El Mundo Va
Todo El Mundo VaTodo El Mundo Va
Todo El Mundo Va
 
Vajat erp 137
Vajat erp 137Vajat erp 137
Vajat erp 137
 
ซาเสียวเอี้ย
ซาเสียวเอี้ยซาเสียวเอี้ย
ซาเสียวเอี้ย
 
Vajat erp 130
Vajat erp 130Vajat erp 130
Vajat erp 130
 
TTF.MTMTE.30
TTF.MTMTE.30TTF.MTMTE.30
TTF.MTMTE.30
 
The Fashion Business Manual (Fashionary International Limited) (z-lib.org).pdf
The Fashion Business Manual (Fashionary International Limited) (z-lib.org).pdfThe Fashion Business Manual (Fashionary International Limited) (z-lib.org).pdf
The Fashion Business Manual (Fashionary International Limited) (z-lib.org).pdf
 
Brick 514
Brick 514Brick 514
Brick 514
 
Vajat erp 083
Vajat erp 083Vajat erp 083
Vajat erp 083
 
TTF.MTMTE.43
TTF.MTMTE.43TTF.MTMTE.43
TTF.MTMTE.43
 
002. Osveta BožAnstva Ra
002. Osveta BožAnstva Ra002. Osveta BožAnstva Ra
002. Osveta BožAnstva Ra
 
Tex Willer Libellus Kolor Biblioteka 008 - Tajni klanac
Tex Willer Libellus Kolor Biblioteka 008 - Tajni klanacTex Willer Libellus Kolor Biblioteka 008 - Tajni klanac
Tex Willer Libellus Kolor Biblioteka 008 - Tajni klanac
 
Revista DeMillus campanhas 11-12-13
Revista DeMillus campanhas 11-12-13Revista DeMillus campanhas 11-12-13
Revista DeMillus campanhas 11-12-13
 
Gn Im - KM - ZS 450
Gn Im - KM - ZS 450Gn Im - KM - ZS 450
Gn Im - KM - ZS 450
 
Dok holidej 208 kirk hamilton - bakskineri
Dok holidej 208   kirk hamilton - bakskineriDok holidej 208   kirk hamilton - bakskineri
Dok holidej 208 kirk hamilton - bakskineri
 
Vajat erp 079 vilijam mark - dodz siti u plamenu
Vajat erp 079   vilijam mark - dodz siti u plamenuVajat erp 079   vilijam mark - dodz siti u plamenu
Vajat erp 079 vilijam mark - dodz siti u plamenu
 
Dok holidej 122 jedan je suvisan
Dok holidej 122 jedan je suvisanDok holidej 122 jedan je suvisan
Dok holidej 122 jedan je suvisan
 
Dok holidej 192 kirk hamilton - sandens
Dok holidej 192   kirk hamilton - sandensDok holidej 192   kirk hamilton - sandens
Dok holidej 192 kirk hamilton - sandens
 
Zagor VC-072 Povratak Diging Bila
Zagor VC-072 Povratak Diging BilaZagor VC-072 Povratak Diging Bila
Zagor VC-072 Povratak Diging Bila
 
Aster blistok 001 vitez beskraja
Aster blistok 001 vitez beskrajaAster blistok 001 vitez beskraja
Aster blistok 001 vitez beskraja
 
Zagor l 268 planine od leda
Zagor l 268   planine od ledaZagor l 268   planine od leda
Zagor l 268 planine od leda
 

Semelhante a Como criar banner rotativo

Javascript truquesmagicos
Javascript truquesmagicosJavascript truquesmagicos
Javascript truquesmagicosponto hacker
 
Introdução de web
Introdução de webIntrodução de web
Introdução de webSedu
 
Introdução a Desenvolvimento Web
Introdução a Desenvolvimento WebIntrodução a Desenvolvimento Web
Introdução a Desenvolvimento WebPeslPinguim
 
Mini Curso - jQuery - FMU
Mini Curso - jQuery - FMUMini Curso - jQuery - FMU
Mini Curso - jQuery - FMUThiago Ericson
 
b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
 b ou strong eis a questão! HTML semântico, o santo graal do front-end =] b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
b ou strong eis a questão! HTML semântico, o santo graal do front-end =]Andréa Zambrana
 
Apostila de HTML para iniciantes
Apostila de HTML para iniciantesApostila de HTML para iniciantes
Apostila de HTML para iniciantesWelington Carvalho
 
COMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLCOMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLRenato Melo
 
Criando Sites Com CMS
Criando Sites Com CMSCriando Sites Com CMS
Criando Sites Com CMSClaudio Toldo
 
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2Altair Borges
 
Segurança e Performance WordPress
Segurança e Performance WordPressSegurança e Performance WordPress
Segurança e Performance WordPressHenrique Mouta
 

Semelhante a Como criar banner rotativo (20)

Javascript truquesmagicos
Javascript truquesmagicosJavascript truquesmagicos
Javascript truquesmagicos
 
Ex2 html
Ex2 htmlEx2 html
Ex2 html
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
Ex1 html
Ex1 htmlEx1 html
Ex1 html
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
 
Introdução a Desenvolvimento Web
Introdução a Desenvolvimento WebIntrodução a Desenvolvimento Web
Introdução a Desenvolvimento Web
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
Mini Curso - jQuery - FMU
Mini Curso - jQuery - FMUMini Curso - jQuery - FMU
Mini Curso - jQuery - FMU
 
b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
 b ou strong eis a questão! HTML semântico, o santo graal do front-end =] b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
Apostila de HTML para iniciantes
Apostila de HTML para iniciantesApostila de HTML para iniciantes
Apostila de HTML para iniciantes
 
COMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLCOMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTML
 
Criando Sites Com CMS
Criando Sites Com CMSCriando Sites Com CMS
Criando Sites Com CMS
 
Php aula1
Php aula1Php aula1
Php aula1
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Dreamweaver aula 1
Dreamweaver aula 1Dreamweaver aula 1
Dreamweaver aula 1
 
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
 
Segurança e Performance WordPress
Segurança e Performance WordPressSegurança e Performance WordPress
Segurança e Performance WordPress
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 

Mais de Nilson Oliveira

Criando seu site e incluindo formas de pagamento
Criando seu site e incluindo formas de pagamentoCriando seu site e incluindo formas de pagamento
Criando seu site e incluindo formas de pagamentoNilson Oliveira
 
Criando aplicativos multimídia com director 7 tambein engloba versoes 5, 6...
Criando aplicativos multimídia com director  7   tambein engloba versoes 5, 6...Criando aplicativos multimídia com director  7   tambein engloba versoes 5, 6...
Criando aplicativos multimídia com director 7 tambein engloba versoes 5, 6...Nilson Oliveira
 
Corel 12 como criar um logotipo
Corel 12   como criar um logotipoCorel 12   como criar um logotipo
Corel 12 como criar um logotipoNilson Oliveira
 
Configuração do cmos ww w.livrosgratis.net-
Configuração do cmos ww w.livrosgratis.net-Configuração do cmos ww w.livrosgratis.net-
Configuração do cmos ww w.livrosgratis.net-Nilson Oliveira
 
Como tarnar o seu blog mais visivel nos sites de busca
Como tarnar o seu blog mais visivel nos sites de buscaComo tarnar o seu blog mais visivel nos sites de busca
Como tarnar o seu blog mais visivel nos sites de buscaNilson Oliveira
 
Como criar seu e book arrasador
Como criar seu e book arrasadorComo criar seu e book arrasador
Como criar seu e book arrasadorNilson Oliveira
 
Como criar gráficos profissionais em excel
Como criar gráficos profissionais em excelComo criar gráficos profissionais em excel
Como criar gráficos profissionais em excelNilson Oliveira
 
Como criar e gerir um blog
Como criar e gerir um blogComo criar e gerir um blog
Como criar e gerir um blogNilson Oliveira
 

Mais de Nilson Oliveira (12)

Curso de access 2010
Curso de access 2010Curso de access 2010
Curso de access 2010
 
Curso básico de redes
Curso básico de redesCurso básico de redes
Curso básico de redes
 
Criando seu site e incluindo formas de pagamento
Criando seu site e incluindo formas de pagamentoCriando seu site e incluindo formas de pagamento
Criando seu site e incluindo formas de pagamento
 
Criando aplicativos multimídia com director 7 tambein engloba versoes 5, 6...
Criando aplicativos multimídia com director  7   tambein engloba versoes 5, 6...Criando aplicativos multimídia com director  7   tambein engloba versoes 5, 6...
Criando aplicativos multimídia com director 7 tambein engloba versoes 5, 6...
 
Corel 12 como criar um logotipo
Corel 12   como criar um logotipoCorel 12   como criar um logotipo
Corel 12 como criar um logotipo
 
Configuração do cmos ww w.livrosgratis.net-
Configuração do cmos ww w.livrosgratis.net-Configuração do cmos ww w.livrosgratis.net-
Configuração do cmos ww w.livrosgratis.net-
 
Como tarnar o seu blog mais visivel nos sites de busca
Como tarnar o seu blog mais visivel nos sites de buscaComo tarnar o seu blog mais visivel nos sites de busca
Como tarnar o seu blog mais visivel nos sites de busca
 
Como postar no 4 shared
Como postar no 4 sharedComo postar no 4 shared
Como postar no 4 shared
 
Como criar seu e book arrasador
Como criar seu e book arrasadorComo criar seu e book arrasador
Como criar seu e book arrasador
 
Como criar gráficos profissionais em excel
Como criar gráficos profissionais em excelComo criar gráficos profissionais em excel
Como criar gráficos profissionais em excel
 
Auto cad arquitetura 3d
Auto cad arquitetura 3dAuto cad arquitetura 3d
Auto cad arquitetura 3d
 
Como criar e gerir um blog
Como criar e gerir um blogComo criar e gerir um blog
Como criar e gerir um blog
 

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)