Conheça o Plugfeed | » Início » Programação » Banner randômico
Conheça o Plugfeed | » Início » Programação » Banner randômico -->
 
Avaliação: | Publicado em: 16/02/2004
Banner randômico
Johnatan Oliveira Graduando em Tec. Informática e Aplicações Web, é desenvolvedor ASP/SQL Server e atua no mercado web a cerca de 4 anos como desenvolvedor e design de interfaces. É apaixonado por Flash MX/Action Script. Atualmente é Diretor de Projetos do Portal Plugmasters, colaborador da Revista WWW.COM.BR, onde escreve sobre ASP e Flash e designer/programador de uma agência web. Além de manter o site johnatan.net.
Banner randômico

Esta dica permite que você implemente banners randômicos nas páginas do seu site: quando a página é carregada, um dos banners é aleatoriamente mostrado nela - sendo que cada um deles tem o seu próprio link, mensagem tooltip e prioridade! Veja como é simples:

1. Insira estas linhas abaixo do <HEAD>:

<SCRIPT LANGUAGE="javascript">
<!--
function banner(imgSource,url,alt,chance) {
this.imgSource = imgSource;
this.url = url;
this.alt = alt;
this.chance = chance;
}
function dispBanner() {
with (this) document.write("<A HREF=" + url + "><IMG SRC="'"" + imgSource + "' WIDTH="468" HEIGHT="60" BORDER="0" ALT="'"" + alt + "'></A>");
}
banner.prototype.dispBanner = dispBanner;
banners = new Array();

banners[0] = new banner("dica_23_banner1.gif",
"dica_23_preview.htm",
"Banner 1",
10);
banners[1] = new banner("dica_23_banner2.gif",
"dica_23_preview.htm",
"Banner 2",
10);
banners[2] = new banner("dica_23_banner3.gif",
"dica_23_preview.htm",
"Banner 3",
10);
banners[3] = new banner("dica_23_banner4.gif",
"dica_23_preview.htm",
"Banner 4",
10);
banners[4] = new banner("dica_23_banner5.gif",
"dica_23_preview.htm",
"Banner 5",
10);
sum_of_all_chances = 0;
for (i = 0; i < banners.length; i++) {
sum_of_all_chances += banners[1].chance;
}
function randomBanner() {
chance_limit = 0;
randomly_selected_chance = Math.round((sum_of_all_chances - 1) * Math.random()) + 1;
for (i = 0; i < banners.length; i++) {
chance_limit += banners[1].chance;
if (randomly_selected_chance <= chance_limit) {
document.write("<A HREF=" + banners[1].url + "><IMG SRC="'"" + banners[1].imgSource + "' WIDTH="468" HEIGHT="60" BORDER="0" ALT="'"" + banners[1].alt + "'></A>");
return banners[1];
break;
}
}
}
// End -->
</SCRIPT>

2. Para configurar os banners, siga este padrão:

banners[0] = new banner("<nome da imagem>",
"<link do banner>",
"<tooltip do banner>",
<prioridade>;

Desta maneira, o seguinte código,

banners[0] = new banner("banner_baboo.gif",
"http://www.baboo.com.br",
"Ir para o BABOO",
10);

Indica que ao ser clicado, o banner cuja imagem chama-se banner_baboo.gif irá para http://www.baboo.com.br. Além disso, a mensagem tooltip dele será Ir para o BABOO e a sua prioridade é 10. Se a prioridade fosse 20, o banner aparecerá com 2x mais chances do que os demais, se a prioridade fosse 50, o benner aparecerá com 5x mais chances do que os demais, e assim por diante ...


3. Agora basta inserir o código abaixo no local aonde você quer que o banner apareçao:

<SCRIPT LANGUAGE="JavaScript">
<!--
this_banner = randomBanner();
-->
</SCRIPT>


OBSERVAÇÕES:

- No exemplo do código acima, existem 5 banners (banners[0] a banners[4]): você deve eliminar ou incluir novos banners, de acordo com a sua necessidade.


Isaa Macedo <dilelac@gmail.com>
Adorei seu site. Parabéns!
Isaac
Gláucia Felix Melo <felix.glaucia@ibest.com.br>
Para uma pessoa leiga , como eu, oque é um barnner randômico você pode explicar de forma mais didática e ilustrativa.
Achei a idéia legal porém há um erro no script que não copnsigo detectar, diz no explorer que linha 11 coluna 59!!
Marcelo, estou testando aqui seu codigo, mas está com problemas, gostaria de saber se ele só irá funcionar se eu colocar a pagina e as imagens na web? Tentei da uma mexida aqui, mas sem muito sucesso. Creio que seja algum problema com algumas aspas ou coisas do tipo, será que vc poderia me ajudar?
Obrigado
Cara! Vocês são pessoas maravilhosas...tudo o que tenho no site que administro da igreja que frequento consegui devido a pessoas como vocês que disponibilizam o que sabem para que outros possam usar...Parabéns! Continuem assim!
Marcelo, tentei fazer como você postou na pagina mas não deu certo. Onde errei? (risos)

Aguardo resposta

Abraços!

Vincent : Não avaliado
Olá Johnatan, tudo bem? Fiz este tutoria de banner randômico fielmente ao que você ensinou, porém não deu certo. Como estou vendo os comentários de outras pessoas, deve haver algum erro no código, será que você ou alguém poderia me ajudar? Abraços
Libanio
Otimo Codigo !!!!

Parabens
Pessoal,
o codigo ae nao funciona mesmo...acho na hora de publicar trocaram algo..
Tentem com o codigo abaixo:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<SCRIPT LANGUAGE="javascript">
<!--
function banner(imgSource,url,alt,chance)
{
this.imgSource = imgSource;
this.url = url;
this.alt = alt;
this.chance = chance;
}
function dispBanner() {

with (this) document.write("<A HREF=" url "><IMG SRC='" imgSource "' WIDTH='468' HEIGHT='60' BORDER='0' ALT='" alt "'></A>");
}
banner.prototype.dispBanner = dispBanner;
banners = new Array();

banners0 = new banner("http://www.revistavirp.com.br/banner_virp_1.jpg", "http://www.uol.com.br", "Banner 1", 10);
banners1 = new banner("http://www.revistavirp.com.br/banner_virp_2.jpg", "http://www.terra.com.br" , "Banner 2", 10);
banners2 = new banner("http://www.revistavirp.com.br/banner_virp_3.jpg", "http://www.ig.com.br" , "Banner 3", 10);
sum_of_all_chances = 0;
for (i = 0; i < banners.length; i) {
sum_of_all_chances = banners1.chance;
}
function randomBanner() {
chance_limit = 0;
randomly_selected_chance = Math.round((sum_of_all_chances - 1) Math.random()) 1;
for (i = 0; i <= banners.length; i) {
chance_limit = banners1.chance;
alert(randomly_selected_chance " " chance_limit);
if (randomly_selected_chance <= chance_limit) {
document.write("<A HREF=" bannersi.url " target='_blank'><IMG SRC='" bannersi.imgSource "' WIDTH='640' HEIGHT='80' BORDER='0' ALT='" bannersi.alt "'></A>");
return bannersi;
break;
}
}
}
// End -->
</SCRIPT>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
this_banner = randomBanner();
-->
</SCRIPT>
</body>
</html>

Pessoal,
deixei uma janela a mais no codigo que mandei antes..usem este:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<SCRIPT LANGUAGE="javascript">
<!--
function banner(imgSource,url,alt,chance)
{
this.imgSource = imgSource;
this.url = url;
this.alt = alt;
this.chance = chance;
}
function dispBanner() {

with (this) document.write("<A HREF=" url "><IMG SRC='" imgSource "' WIDTH='468' HEIGHT='60' BORDER='0' ALT='" alt "'></A>");
}
banner.prototype.dispBanner = dispBanner;
banners = new Array();

banners0 = new banner("http://www.revistavirp.com.br/banner_virp_1.jpg", "http://www.uol.com.br", "Banner 1", 10);
banners1 = new banner("http://www.revistavirp.com.br/banner_virp_2.jpg", "http://www.terra.com.br" , "Banner 2", 10);
banners2 = new banner("http://www.revistavirp.com.br/banner_virp_3.jpg", "http://www.ig.com.br" , "Banner 3", 10);
sum_of_all_chances = 0;
for (i = 0; i < banners.length; i) {
sum_of_all_chances = banners1.chance;
}
function randomBanner() {
chance_limit = 0;
randomly_selected_chance = Math.round((sum_of_all_chances - 1) Math.random()) 1;
for (i = 0; i <= banners.length; i) {
chance_limit = banners1.chance;
if (randomly_selected_chance <= chance_limit) {
document.write("<A HREF=" bannersi.url " target='_blank'><IMG SRC='" bannersi.imgSource "' WIDTH='640' HEIGHT='80' BORDER='0' ALT='" bannersi.alt "'></A>");
return bannersi;
break;
}
}
}
// End -->
</SCRIPT>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
this_banner = randomBanner();
-->
</SCRIPT>
</body>
</html>

Leandro
Que relaxo, obarato não funfa
Não consegui fazer funcionar
Não consegui fazer funcionar, será que alguém possa me ajudar? : Não avaliado
Pedro Rocha Diniz <prddiniz@yahoo.com.br>
Não tive éxito, talvez burrice minha mesmo, pois sou novo na matéria. O código que colequei foi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<HEAD>:

<SCRIPT LANGUAGE="javascript">
<!--
function banner(imgSource,url,alt,chance) {
this.imgSource = imgSource;
this.url = url;
this.alt = alt;
this.chance = chance;
}
function dispBanner() {
with (this) document.write("<A HREF=" url "><IMG SRC="'"" imgSource "' WIDTH="468" HEIGHT="60" BORDER="0" ALT="'""

alt "'></A>");
}
banner.prototype.dispBanner = dispBanner;
banners = new Array();

banners0 = new banner("bannercopa1.png",
"index.htm",
"Banner 1",
10);
banners1 = new banner("bannercopa2.png.gif",
"dica_23_preview.htm",
"Banner 2",
10);
banners2 = new banner("bannercopa3.png.gif",
"dica_23_preview.htm",
"Banner 3",
10);
banners3 = new banner("bannercopa4.png.gif",
"dica_23_preview.htm",
"Banner 4",
10);
banners4 = new banner("bannercopa5.png.gif",
"dica_23_preview.htm",
"Banner 5",
10);
sum_of_all_chances = 0;
for (i = 0; i < banners.length; i) {
sum_of_all_chances = banners1.chance;
}
function randomBanner() {
chance_limit = 0;
randomly_selected_chance = Math.round((sum_of_all_chances - 1) Math.random()) 1;
for (i = 0; i < banners.length; i) {
chance_limit = banners1.chance;
if (randomly_selected_chance <= chance_limit) {
document.write("<A HREF=" banners1.url "><IMG SRC="'"" banners1.imgSource "' WIDTH="468" HEIGHT="60" BORDER="0"

ALT="'"" banners1.alt "'></A>");
return banners1;
break;
}
}
}
// End -->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
this_banner = randomBanner();
-->
</SCRIPT>
</html>



Um produto Detetive.net