Plusieurs rollovers Javascript

Question

J'essaie de faire un multi-rollover avec Javascript. Je sais que beaucoup de gens disent utiliser css, mais cela se fera en Javascript cette fois-ci.

De toute façon, j'ai beaucoup de problèmes avec cette hiérarchie de renversement. J'ai un bouton image nav avec cinq boutons. Lorsque vous passez la souris sur l'un des boutons, le bouton change de couleur ET un en-tête apparaît en dessous pour ce bouton. La partie suivante est que l'utilisateur doit survoler le titre, puis une autre image apparaît avec le texte qui décrit l'en-tête. Ainsi, par exemple, le bouton peut être un sourire rouge, lorsque vous le survolez, il devient un sourire bleu et un en-tête s'affiche sous le nom Happy. Ensuite, si vous roulez heureux, vous obtenez une image de texte décrivant ce que signifie être heureux. C'est la façon dont le client le veut et la seule raison pour laquelle j'utilise une image de texte, c'est parce que son texte utilise une police unique. Donc, juste pour vous montrer que j'ai essayé de coder ceci et ne pas chercher de réponse sans le travail, voici mon code jusqu'à maintenant. Ça fonctionne, mais ce n'est pas génial et je ne suis pas très familier avec 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 ..

Vous devriez regarder dans jQuery.

Par exemple ..

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

A l'intérieur des fonctions que vous pouvez également jouer avec la visibilité et faire tout ce que vous voulez.