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"); 
      } 
     ); 
    } 
) 

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