6 replies to this topic

[Guilherme Blanco]

Bem, aproveitando que o Wrathchild havia postado o Banner Rotativo dele, eu fiquei com inveja e resolvi postar o meu também (eu já o construi a cerca de 8 meses atrás, para um membro do Fórum), mas eu nunca o publiquei aqui.

Ei-lo:

    <STYLE>
      A.bannerrotator:link { text-decoration: none; color: black; font-weight: bold; }
      A.bannerrotator:visited { text-decoration: none; color: black; font-weight: bold; }
      A.bannerrotator:active { text-decoration: none; color: black; font-weight: bold; }
      A.bannerrotator:hover { text-decoration: none; color: orange; font-weight: bold; }
    </STYLE>
    <script>
      function grabElement( sId ) {
        if(document.getElementById) { return document.getElementById(sId); }
        else { if(document.all) { return document.all[sId]; }
        else { return document.layers[sId]; } }
      }

      var numLinks = posCorrente = -1;
      var timer = 5; // tempo default (em segundos)
      var imgWidth = 468; // Largura default (em pixels)
      var imgHeight = 60; // Altura default (em pixels)
      var banners = new Array();

      bannerRotator = new Object();
      bannerRotator.create = createBannerRotator;
      bannerRotator.add = addBannerRorator;
      bannerRotator.setTimer = setTimerBannerRotator;
      bannerRotator.setWidth = setWidthBannerRotator;
      bannerRotator.setHeight = setHeightBannerRotator;
      bannerRotator.init = initBannerRotator;

      function createBannerRotator() {
        document.write("<DIV ID='bannerRotator'>&nbsp;</DIV>");
      }

      function addBannerRorator( sText, sURL, sTarget ) {
       banners[++numLinks] = new Array( sText, sURL, sTarget );
      }

      function setTimerBannerRotator( sTimer ) {
        timer = sTimer;
      }
      
      function setWidthBannerRotator( iWidth ) {
        imgWidth = iWidth;
      }

      function setHeightBannerRotator( iHeight ) {
        imgHeight = iHeight;
      }

      function initBannerRotator() { bannerUpdate(); }

      function bannerUpdate() {
        if(++posCorrente == numLinks+1) { posCorrente = 0; }
        if( banners[posCorrente][2] == undefined ) {
          grabElement('bannerRotator').innerHTML = "<A CLASS='bannerrotator' HREF='"+banners[posCorrente][1]+"'><IMG SRC='"+banners[posCorrente][0]+"' BORDER='0' WIDTH='"+imgWidth+"' HEIGHT='"+imgHeight+"'></A>";
        } else {
          grabElement('bannerRotator').innerHTML = "<A CLASS='bannerrotator' HREF='"+banners[posCorrente][1]+"' TARGET='"+banners[posCorrente][2]+"'><IMG SRC='"+banners[posCorrente][0]+"' BORDER='0' WIDTH='"+imgWidth+"' HEIGHT='"+imgHeight+"'></A>";
        }
        setTimer();
      }

      function setTimer() {
        window.setTimeout("bannerUpdate()", timer*1000);
      }
    </SCRIPT>

Já está incluso as definições de folha de estilo que são usadas, basta alterá-las ao seu gosto (apesar de elas não ficarem aparentes).
Bem... agora vem a parte nervosa do código, a implantação do sistema.

É bem simples... basta onde você quiser adicionar o banner rotator o seguinte código:

    <script>
      bannerRotator.create();
      bannerRotator.setTimer(3); // Definindo tempo de troca
      bannerRotator.setWidth(120); // Definindo largura
      bannerRotator.setHeight(180); // Definindo altura
      bannerRotator.add("cade.jpg", "http://www.cade.com.br", "_blank");
      bannerRotator.add("yahoo.gif", "http://www.yahoo.com.br");
      bannerRotator.add("teste2.png", "teste2.html", "nome_de_janela_popup");
      bannerRotator.add("funcionando.bmp", "about:blank", "_blank");
      bannerRotator.init();
    </SCRIPT>

Os métodos add definem a figura, o link e o target. Deixar o target em branco significa abrí-lo na janela corrente.

Há outros métodos possíveis, para redimensionamento do banner rotator (setWidth e setHeight), para setar o tempo diferente do padrão, que é 5 segundos (setTimer). Os outros métodos (create e init) servem para criar o espaço de exibição e para iniciar a rotatividade, respectivamente.

Acho que o código não é difícil, mas caso alguém tenha dúvida, pode me perguntar...

[]s,

[Fragnatic]

Tipo agora que ja fez a pagina que ira rodar o banner roativo , tem como pegar um pequeno codigo e colocar em outra pagina ,tipo ligando as duas , ou outro exemplo ,tipo no wmonline eu pego um pequeno codigo ecoloco na minha pagina e as inforaçoes que esta no site do wmonline venha para a minha pagina tipo ,pq tipo , vai ter que colocar esse codigo desse tamanho na index?

[Guilherme Blanco]

Sim, basta vc copiar o source dos banners e adicioná-los num arquivo JS.

Proceda como se você estivesse anexando scripts na sua página.

[]s,

[misterviralata]

Onde coloca a imagem neste banner?

[Alex Hiroshi]

Os métodos add definem a figura, o link e o target. Deixar o target em branco significa abrí-lo na janela corrente.

Veja o script postado e leia o post.

<script>
	 bannerRotator.create();
	 bannerRotator.setTimer(3); // Definindo tempo de troca
	 bannerRotator.setWidth(120); // Definindo largura
	 bannerRotator.setHeight(180); // Definindo altura
	 bannerRotator.add("cade.jpg", "http://www.cade.com.br", "_blank");
	 bannerRotator.add("yahoo.gif", "http://www.yahoo.com.br");
	 bannerRotator.add("teste2.png", "teste2.html", "nome_de_janela_popup");
	 bannerRotator.add("funcionando.bmp", "about:blank", "_blank");
	 bannerRotator.init();
   </SCRIPT>

[Stress]

aproveito também nesse embalo.

como puxar esse código em vez de deixar esse código todo numa página?

[Canaril Almada]

Boas...
Uma duvida, esse codigo fica todo só numa pagina?

Ou tem de se criar duas paginas para o código funcionar?

cumps.