Javascript vários capotamentos

Question

Eu estou tentando fazer um multi rollover com Javascript. Eu conheço um monte de pessoas dizem usar o CSS, mas isso vai ser feito em Javascript desta vez.

De qualquer forma, estou tendo muita dificuldade com esta hierarquia capotamento. Eu tenho um nav imagem botão com cinco botões. Quando você mouseover um dos botões, o botão muda de cor e um título aparece embaixo para esse botão. A próxima parte é que o usuário tem a pairar sobre o título, e depois outra imagem aparece com texto em que descreve o título.

Assim, por exemplo, o botão pode ser um sorriso vermelho, quando você rollover, torna-se um sorriso azul e, em seguida, um cabeçalho aparece embaixo que diz feliz. Então, se você rollover feliz, você obtém uma imagem de texto descrevendo o que significa ser feliz. Esta é a maneira que o cliente quer e a única razão pela qual eu estou usando uma imagem de texto, é porque seu texto usa uma fonte única.

Assim, apenas para mostrar que eu tenho tentado este código e não à procura de resposta sem o trabalho, aqui está o meu código até agora. É o tipo de obras, mas não é grande e eu não estou tão familiarizado com javascript.

function rollover()
{
  var images = document.getElementsByTagName("img");
  var roll = new RegExp("roll");
  var header = new RegExp("_(?=roll)");
  var text = new RegExp("_(?=text)");
  var simple = new RegExp("simple");
  var currentRoll;
  var preload = [];
  var fileLoc = "images/rollovers/";

  for ( var i=0; i<images.length; i++)
  {
    if (images[i].id.match(roll))
    {
      currentRoll = images[i].id;
      preload[i] = new Image();
      preload[i].src = images[i].id + "_over.gif";
      images[i].onmouseover = function() 
      { 
        var button = this.id;
        this.src = fileLoc + this.id + "_over.gif";

        for ( var i=0; i<images.length; i++)
        {
          if (images[i].id.match(header))
          {
            var temp = images[i].id;
            if (images[i].id == "_" + this.id + "_header")
            {
              images[i].src = fileLoc + this.id + "_header.gif";
              images[i].style.visibility="visible";
              images[i].onmouseover = function() 
              {
                  for ( var i=0; i<images.length; i++)
                  {
                    if (images[i].id.match(text))
                    {
                      var temp = images[i].id;
                      images[i].src = fileLoc + this.id + "_text.gif";
                      images[i].style.visibility="visible";
                      break;

                    }
                  }  
              }
              break;
            }
            else
            {
              images[i].src = fileLoc + this.id + "_header.gif";
              images[i].setAttribute("id", 
              images[i].style.visibility="visible";
              images[i].onmouseover = function() 
              {
                for ( var i=0; i<images.length; i++)
                {
                  if (images[i].id.match(text))
                  {
                    var temp = images[i].id;
                    images[i].src = fileLoc + this.id + "_text.gif";
                    images[i].style.visibility="visible";
                    break;

                  }
                }  
              }
              break;
            }
          }
        }
        images[i].onmouseout = function() 
        { 
          this.src = fileLoc + this.id + "_org.gif"; 
          for ( var i=0; i<images.length; i++)
          {
            if (images[i].id.match(header))
            {

              images[i].style.visibility="hidden"
            }
          } 

        }
      }  
    }

    else if (images[i].id.match(simple))
    {
      preload[i] = new Image();
      preload[i].src = images[i].id + "_over.gif";
      images[i].onmouseover = function() 
      {
        this.src = fileLoc + this.id + "_over.gif";  
      }
      images[i].onmouseout = function()
      {
        this.src = fileLoc + this.id + "_org.gif";
      }
    }
  }
}

window.onload = rollover;

Answer 1

Cripes ..

Você deve olhar para usar jQuery .

Por exemplo ..

$(
    function() {
        $("img.rollover").hover(
            function() {
                this.src = this.src.replace("_org","_over");
            },
            function() {
                this.src = this.src.replace("_over","_org");
            }
        );
    }
)

Dentro das funções que você também pode brincar com a visibilidade e fazer tudo o que quiser.