Link Rotator

#1 Guilherme Blanco

Conselheiros
891 posts

Sexo:Masculino
Localidade:São Carlos - SP/Brasil
Interesses:Programação Web e minha namorada (Maria Camila).

Posted 23/09/2003, 10:40

Já que eu postei a poucos minutos atrás o banner rotator, vou aproveitar o embalo e postar o link rotator também... o script foi criado na mesma época do banner rotator (a uns 7, 8 meses atrás).

Eis o código:

    <STYLE>
      A.linkrotator:link { text-decoration: none; color: black; font-weight: bold; }
      A.linkrotator:visited { text-decoration: none; color: black; font-weight: bold; }
      A.linkrotator:active { text-decoration: none; color: black; font-weight: bold; }
      A.linkrotator: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 links = new Array();

      linkRotator = new Object();
      linkRotator.create = createLinkRotator;
      linkRotator.add = addLinkRorator;
      linkRotator.setTimer = setTimerLinkRotator;
      linkRotator.init = initLinkRotator;

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

      function addLinkRorator( sText, sURL ) {
        links[++numLinks] = new Array( sText, sURL );
      }
      
      function setTimerLinkRotator( sTimer ) {
        timer = sTimer;
      }

      function initLinkRotator() { linkUpdate(); }

      function linkUpdate() {
        if(++posCorrente == numLinks+1) { posCorrente = 0; }
        grabElement('linkRotator').innerHTML = "<A CLASS='linkrotator' HREF='"+ links[posCorrente][1]+"'>"+ links[posCorrente][0] +"</A>";
        setTimer();
      }

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

As definições CSS usadas já estão inclusas, para alterá-las, simplesmente edite as tags.

Para usar é bem simples... basta que você coloque o código abaixo no local onde quer executar o link rotator.

    <script>
      linkRotator.create();
      linkRotator.setTimer(3);
      linkRotator.add("Cade", "http://www.cade.com.br");
      linkRotator.add("Yahoo", "http://www.yahoo.com.br");
      linkRotator.add("Teste2 (Interno)", "teste2.html");
      linkRotator.add("Página em branco", "about:blank");
      linkRotator.init();
    </SCRIPT>

Da mesma forma que o banner rotator, o método add adiciona um novo item no link rotator... mas o número máximo de argumentos é 2 (texto e link), e todos os links abrirão na janela corrente. Os outros métodos controlam a inicialização, criação e setagem de tempo entre as alternâncias dos textos.

Caso alguém tenha dúvida, entre em contato comigo...

[]s,

#2 Thyago Mendes

ActionScript

Usuários
161 posts

Sexo:Não informado
Localidade:Recife - PE

Posted 25/09/2003, 15:07

Muito bom Guilherme Blanco, a qualidade do código está excelente, mas tem um pequeno problema, se tentar usar ele em mas de um local na página não da porque esta limitado a uma única div.

Desenvolvi uma solução tb, acredito que esteja longe de ser ideal até porque possui um pequeno bug na atribuições das referências da Classe, e não sei se estar "universal" de qualquer forma vou postar o código aqui.

<script language="JavaScript">
function LinksRotation(){
  this.arLinks=[]; this.i=this.b=0; $this=this
}
LinksRotation.prototype.setLink=function(link,texto){
  this.arLinks[this.i++]=[link,texto];
}
LinksRotation.prototype.repete=function(l){
  if(this.b < this.arLinks.length)
    l.innerHTML="<a href="+this.arLinks[this.b][0]+" target='_blank' class='css'>"+this.arLinks[this.b++][1]+"</a>"
  else { 
    this.b=0; this.repete(eval(l))
  }
}
LinksRotation.prototype.start=function(l,tempo){
  this.repete(eval(l))
  setInterval("$this.repete("+l+")", tempo);
}
</script>

Para usar:

<body>
<div id="local">
<script language="JavaScript">
  var teste=new LinksRotation()
  teste.setLink("http://www.link1.com","Link1")
  teste.setLink("http://www.link2.com","Link2")
  teste.setLink("http://www.link3.com","Link3")  
  teste.start("local",1000)
</script>
</div>
</body>

o problema da classe esta no método start que ficou limitado tb a uma única referência..... não consegui tirar a referência do setInterval para o objeto.

Caso alguém se interesse em implementar fiquem a vontade.

#3 Guilherme Blanco

Conselheiros
891 posts

Sexo:Masculino
Localidade:São Carlos - SP/Brasil
Interesses:Programação Web e minha namorada (Maria Camila).

Posted 25/09/2003, 23:44

Hum... interessante seu método via ECMA...

Eu tinha pensado em construí-lo assim, mas no final eu achei melhor fazer do jeito final mesmo... eu tava com pressa, e precisava entregar o script rapidamente....

Assim que tiver um tempo livre, vou dar uma melhor avaliada no que você fez.

[]s,

#4 Guilherme Blanco

Conselheiros
891 posts

Sexo:Masculino
Localidade:São Carlos - SP/Brasil
Interesses:Programação Web e minha namorada (Maria Camila).

Posted 05/10/2003, 15:27

Conforme prometido, eis aqui a versão 2.0 do Link Rotator...

Eis o código já montado um exemplo.

<html>
  <head>
    <title>Link Rotator</title>
    <style>
      A.linkrotator:link { text-decoration: none; color: black; font-weight: bold; }
      A.linkrotator:visited { text-decoration: none; color: black; font-weight: bold; }
      A.linkrotator:active { text-decoration: none; color: black; font-weight: bold; }
      A.linkrotator:hover { text-decoration: none; color: orange; font-weight: bold; }
    </style>

    <script>
      /*******************************************************************************
       * Link Rotator  v 2.0                                                         *
       *******************************************************************************
       * Author: Guilherme Augusto Blanco                                            *
       * MSN: guilhermeblanco@hotmail.com                                            *
       * ICQ: 33288081                                                               *
       *******************************************************************************
       * GPL - The GNU General Public License    http://www.gnu.org/licenses/gpl.txt *
       * Permits anyone the right to use and modify the software without limitations *
       * as long as proper  credits are given  and the original  and modified source *
       * code are included. Requires  that the final product, software derivate from *
       * the original  source or any  software  utilizing a GPL  component, such  as *
       * this, is also licensed under the GPL license.                               *
       *******************************************************************************
       * Last modifyed: 05-10-2003                                                   *
       *******************************************************************************/

      function grabElement( sId ) {
        if(document.getElementById) { return document.getElementById(sId); }
        else { if(document.all) { return document.all[sId]; }
        else { return document.layers[sId]; } }
      }

      function LinkRotator() {
        for( var i = 1;; i++ ) { if( ! grabElement("linkRotator"+i) ) { break; } }
        document.write("<div id=\"linkRotator"+i+"\">&nbsp;</div>");
        this.links = [];
        this.timer = 2;
        this.counter = this.pointer = -1;
        this.identifier = "linkRotator"+i;
      }

      LinkRotator.prototype.add = function( sText, sURL ) {
        var oThis = this;
        oThis.links[++oThis.counter] = new Array( sText, sURL );
      }

      LinkRotator.prototype.update = function( ) {
        var oThis = this;
        if( ++oThis.pointer == oThis.counter + 1 ) { oThis.pointer = 0; }
        grabElement(oThis.identifier).innerHTML = "<A CLASS='linkrotator' HREF='"+ oThis.links[oThis.pointer][1]+"'>"+ oThis.links[oThis.pointer][0] +"</A>";
        oThis.change();
      }

      LinkRotator.prototype.init = function ( ) {
        var oThis = this;
        oThis.update();
      }

      LinkRotator.prototype.change = function( ) {
        var oThis = this;
        window.setTimeout( function () { oThis.update(); }, oThis.timer*1000);
      }

      LinkRotator.prototype.setTimer = function ( iTimer ) {
        var oThis = this;
        oThis.timer = iTimer;
      }
    </script>
  </head>

  <body>
    <script>
      var link = new LinkRotator();
      link.add("Teste1", "http://www.pontukom.com");
      link.add("Teste2", "http://www.pontukom.com");
      link.add("Teste3", "http://www.pontukom.com");
      link.add("Teste4", "http://www.pontukom.com");
      link.add("Teste5", "http://www.pontukom.com");
      link.add("Teste6", "http://www.pontukom.com");
      link.init();
      
      var link2 = new LinkRotator();
      link2.setTimer(1);
      link2.add("Teste1", "http://www.pontukom.com");
      link2.add("Teste2", "http://www.pontukom.com");
      link2.add("Teste3", "http://www.pontukom.com");
      link2.add("Teste4", "http://www.pontukom.com");
      link2.add("Teste5", "http://www.pontukom.com");
      link2.add("Teste6", "http://www.pontukom.com");
      link2.init();
    </script>
  </body>
</html>

Qualquer dúvida, é só postar.

[]s,

#1 Guilherme Blanco

#2 Thyago Mendes

#3 Guilherme Blanco

#4 Guilherme Blanco

1 user(s) are reading this topic

Entrar