Javascript多次翻转

Question

我正在尝试使用Javascript进行多次翻转。我知道很多人都说使用css，但是这次将会在Javascript中完成。

无论如何，我在这个翻转层次结构中遇到了很多麻烦。我有一个按钮图像导航与五个按钮。当您将鼠标悬停在其中一个按钮上时，该按钮会更改颜色，并且该按钮下方会出现一个标题。下一部分是用户必须将鼠标悬停在标题上，然后出现其他图像，其中包含描述标题的文字。

所以，例如，按钮可能是一个红色的微笑，当你翻转它时，它会变成一个蓝色的微笑，然后一个标题出现在下面的那个说快乐。然后，如果你快乐滚动，你会得到一个描述快乐的文字图像。这是客户想要的方式，也是我使用文本图像的唯一原因，是因为他的文本使用了独特的字体。

所以，只是为了告诉你，我一直在试图编写代码，而不是在没有工作的情况下寻找答案，这里是我的代码。它有点作品，但它不是很好，我不喜欢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 ..

你应该考虑使用jQuery。

例如..

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

里面你也可以玩的知名度和做任何你想要的其他功能。