懸停效果無法正常工作

自從上週以來，我就一直在抨擊我的大腦：（我有一個使用標籤界面的頁面，但菜單是一個與地圖佈局綁定的圖形，我所做的是我使用jQuery編碼器爲每個五個方面的懸停效果下面的代碼：。懸停效果無法正常工作

 var id1_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1.png"; 

     var id11_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-1.png"; 

     var id12_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-2.png"; 

     var id13_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-3.png"; 

     var id2_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id2.png"; 

     var id21_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id2-1.png"; 

     var id22_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id2-2.png"; 

     var id23_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id2-3.png";  

     var id3_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id3.png"; 

     var id31_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id3-1.png"; 

     var id32_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id3-2.png"; 

     var id33_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id3-3.png";  

     var id4_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id4.png"; 

     var id41_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id4-1.png"; 

     var id42_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id4-2.png"; 

     var id43_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id4-3.png"; 

(...I have a bunch of other similar declarations, 58 images in all...) 

     var img = ""; 

     function rolloverArea(area, orgImgSrc, tgtImgSrc, orgCursor, tgtCursor) // jQuery script for rollover effect 
     { 
     $("imgTab").attr("src",""); 
     $("#imgTab").attr("src", orgImgSrc); 
     $(area).hover(
      function() 
      { 
       //alert(orgImgSrc + " on hover"); 
       //alert(tgtImgSrc + " on hover"); 
       $("imgTab").attr("src",""); 
       $("#imgTab").attr("src", tgtImgSrc); 
       $("#imgTab").css("cursor",tgtCursor); 
      }, 
      function() 
      { 
       //alert(orgImgSrc + " after hover"); 
       //alert(tgtImgSrc + " after hover"); 
       $("imgTab").attr("src",""); 
       $("#imgTab").attr("src", orgImgSrc); 
       $("#imgTab").css("cursor",orgCursor); 
      } 
     ); 
     } 

     function changeImgState(img) // tab interface of Day Week and Month arrows 
     { 
     var myImgTab = document.getElementById("imgTab"); 

     switch (img) 
     { 
      case 'id1': 
     $(myImgTab).attr("src", "");  
     $(myImgTab).attr("src", id1_src); 
     $("#D1").css({"visibility":"visible", "position":"relative", "top":"0px"}); 
     $("#D2").css({"visibility":"hidden", "position":"relative", "top":"0px"}); 
     $("#D3").css({"visibility":"hidden", "position":"relative", "top":"0px"}); 

     // Rollover effect for the image 
     rolloverArea("#area1",id1_src,id1_src,"auto","auto"); 
     rolloverArea("#area2",id1_src,id11_src,"auto","pointer"); 
     rolloverArea("#area3",id1_src,id12_src,"auto","pointer"); 
     rolloverArea("#area4",id1_src,id13_src,"auto","pointer"); 
     rolloverArea("#area5",id1_src,id1_src,"auto","auto"); 

     // onClick effect 
     $("#area2").click(function() { 
      img = ""; 
      changeImgState("id2"); 

      } 
     ); 

     $("#area3").click(function() { 
      img = ""; 
      changeImgState("id3"); 
      } 
     ); 

     $("#area4").click(function() { 
      img = ""; 
      changeImgState("id4"); 
      } 
     ); 

     break; 
      case 'id2': 

     $(myImgTab).attr("src", id2_src); 
     $("#D1").css({"visibility":"hidden", "position":"relative", "top":"0px"}); 
     $("#D2").css({"visibility":"visible", "position":"relative", "top":"-588px"}); 
     $("#D3").css({"visibility":"hidden", "position":"relative", "top":"0px"}); 


     // Rollover effect for the image 
     rolloverArea("#area1",id2_src,id21_src,"auto","pointer"); 
     rolloverArea("#area2",id2_src,id2_src,"auto","auto"); 
     rolloverArea("#area3",id2_src,id22_src,"auto","pointer"); 
     rolloverArea("#area4",id2_src,id23_src,"auto","pointer"); 
     rolloverArea("#area5",id2_src,id2_src,"auto","auto"); 

     // onClick effect 
     $("#area1").click(function() { 
      $(myImgTab).attr("src", ""); 
      img = ""; 
      changeImgState("id1"); 
      } 
     ); 

     $("#area3").click(function() { 
      img = ""; 
      changeImgState("id3"); 
      } 
     ); 

     $("#area4").click(function() { 
      img = ""; 
      changeImgState("id4"); 
      } 
     ); 

     break; 

      case 'id3': 

     $(myImgTab).attr("src", id3_src); 
     $("#D1").css({"visibility":"hidden", "position":"relative", "top":"0px"}); 
     $("#D2").css({"visibility":"hidden", "position":"relative", "top":"0px"}); 
     $("#D3").css({"visibility":"visible", "position":"relative", "top":"-874px"}); 


     // Rollover effect for the image 
     rolloverArea("#area1",id3_src,id31_src,"auto","pointer"); 
     rolloverArea("#area2",id3_src,id32_src,"auto","pointer"); 
     rolloverArea("#area3",id3_src,id3_src,"auto","auto"); 
     rolloverArea("#area4",id3_src,id33_src,"auto","pointer"); 
     rolloverArea("#area5",id3_src,id3_src,"auto","auto"); 

     // onClick effect 
     $("#area1").click(function() { 
      changeImgState("id1"); 
      } 
     ); 

     $("#area2").click(function() { 
      changeImgState("id2"); 
      } 
     ); 

     $("#area4").click(function() { 
      changeImgState("id4"); 
      } 
     ); 

     break; 

      case 'id4': 

     $(myImgTab).attr("src", id4_src); 

     // Rollover effect for the image 
     rolloverArea("#area1",id4_src,id41_src,"auto","pointer"); 
     rolloverArea("#area2",id4_src,id42_src,"auto","pointer"); 
     rolloverArea("#area3",id4_src,id43_src,"auto","pointer"); 
     rolloverArea("#area4",id4_src,id4_src,"auto","auto"); 
     rolloverArea("#area5",id4_src,id4_src,"auto","auto"); 

     // onClick effect 
     $("#area1").click(function() { 
      changeImgState("id1"); 
      } 
     ); 

     $("#area2").click(function() { 
      changeImgState("id2"); 
      } 
     ); 

     $("#area3").click(function() { 
      changeImgState("id3"); 
      } 
     ); 

     break; 

(...There are some more similar cases, but they're all basically the same as those above, except for the variables...) 

     } 

     } 

/* My page has two tabs, the first one has three options - First Day, First Week, and First Month. The other one is the one that uses the image. The former is tied to changeTab and the other one uses the changeImgState. However, the former also uses the codes of the latter. */ 

     function changeTab(tab) 
     { 
     switch(tab)  
     { 
      case 'day1': 
     var myTab = document.getElementById("day1"); 

     document.getElementById("week1").className = "active"; 
     document.getElementById("month1").className = "active";   
     myTab.className = "current"; 

     changeImgState("id1"); 

     // Rollover effect for the image 
     rolloverArea("#area1",id1_src,id1_src,"auto","auto"); 
     rolloverArea("#area2",id1_src,id11_src,"auto","pointer"); 
     rolloverArea("#area3",id1_src,id12_src,"auto","pointer"); 
     rolloverArea("#area4",id1_src,id13_src,"auto","pointer"); 
     rolloverArea("#area5",id1_src,id1_src,"auto","auto"); 

     // onClick effect 
     $("#area2").click(function() { 
      changeImgState("id2"); 
      } 
     ); 

     $("#area3").click(function() { 
      changeImgState("id3"); 
      } 
     ); 

     $("#area4").click(function() { 
      changeImgState("id4"); 
      } 
     );   

     break; 
      case 'week1': 
     document.getElementById("day1").className = "active"; 
     document.getElementById("month1").className = "active";   
     document.getElementById("week1").className = "current"; 

     changeImgState("iw1"); 

     rolloverArea("#area1",iw1_src,iw1_src,"auto","auto"); 
     rolloverArea("#area2",iw1_src,iw11_src,"auto","pointer"); 
     rolloverArea("#area3",iw1_src,iw12_src,"auto","pointer"); 
     rolloverArea("#area4",iw1_src,iw13_src,"auto","pointer"); 
     rolloverArea("#area5",iw1_src,iw14_src,"auto","pointer"); 

     // onClick effect 
     $("#area2").click(function() { 
      changeImgState("iw2"); 
      } 
     ); 

     $("#area3").click(function() { 
      changeImgState("iw3"); 
      } 
     ); 

     $("#area4").click(function() { 
      changeImgState("iw4"); 
      } 
     ); 

     $("#area5").click(function() { 
      changeImgState("iw5"); 
      } 
     );   

     break; 
      case 'month1': 
     document.getElementById("week1").className = "active"; 
     document.getElementById("day1").className = "active";   
     document.getElementById("month1").className = "current"; 

     changeImgState("im1"); 

     // Rollover effect for the image 
     rolloverArea("#area1",im1_src,im1_src,"auto","auto"); 
     rolloverArea("#area2",im1_src,im11_src,"auto","pointer"); 
     rolloverArea("#area3",im1_src,im12_src,"auto","pointer"); 
     rolloverArea("#area4",im1_src,im13_src,"auto","pointer"); 
     rolloverArea("#area5",im1_src,im1_src,"auto","auto"); 

     // onClick effect 
     $("#area2").click(function() { 
      changeImgState("im2"); 
      } 
     ); 

     $("#area3").click(function() { 
      changeImgState("im3"); 
      } 
     ); 

     $("#area4").click(function() { 
      changeImgState("im4"); 
      } 
     );   

     break; 
     } 

     } 

    </script> 
    <script lang="en" type="text/jscript"> 
        $(window).load(function() 
        { 
         changeTab('day1'); 
         //preLoadImages(); 
        }); 
    </script>

圖形分解爲五個方面，所以我賦予他們每個人的懸停對初始加載，它的工作原理如果從初始加載（「id21」），我懸停在area1以外的區域，情況也是如此，代碼正常工作，當我點擊其他區域中的區域1時出現問題。例如，我在區域2，並且點擊區域1，圖像變化開始變得困惑。

例如，在初始加載時，它應該轉到id1。圖像顯示id1_src（id1.png）。懸停在其他區域導致以下：

區域2：id1-1.png（id11_src）區域3：id1-2.png（id12_src）區域4：id1-3.png（id13_src）

當我點擊區域2時，圖像的源代碼變爲id2.png（id2_src），所以這是我們的基本圖形。懸停效果如下：

區域1：id1-1.png（id21_src）區域3：id1-2.png（id22_src）區域4：id1-3.png（id23_src）

的其他地區也遵循相同的模式。當我從其他區域點擊區域1時，我遇到了錯誤。不知怎的，不是按照上面爲id1列出的約定，而是通過混合（或者可能保留）先前的值，圖形開始變得混亂。懸停效果somethings顯示原始基本圖形。

奇怪的是，我只在id1（或區域1）遇到這個問題時，從其他區域過渡。

請幫忙提前:(感謝，

POCH

來源

2011-06-13 Poch

請刪除代碼的98％並只顯示相關部分。否則很難得到答案 – Ibu 2011-06-13 06:08:20

@lbu - 現在就刪除它們。是的，我複製了整個代碼。對於那個很抱歉。 – Poch 2011-06-13 06:13:22

哇。不得不保持這一大堆魔法代碼的哀悼。通過使用數組來跟蹤您的站點的不同元素的_unique_，並試圖進一步標準化文件名和變量名，可以獲得一些清晰的結果。（獎金，擺脫所有這些變數......） – sarnold 2011-06-13 08:04:02

如果我知道的JavaScript更好，我可以給你一個合理的方式壓縮所有這些行：

var id1_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1.png"; 
var id11_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-1.png";

有一小撮的方法來改善這一點;對於formatted print例程的語言，它看起來像這樣：

char *basefn = "/systems_hr/onboarding/Custom%%20Pages/Checklist%%20EN/images/%s.png";

然後，當你需要一個，你會使用：

printf(basefn, "id1"); 
printf(basefn, "id11");

在語言不帶格式化的打印程序，你可能會使用字符串連接：

basefn = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/" 
tailfn = ".png" 

def mk_fn(image) 
    return basefn + image + tailfn 
end 

mk_fn("id1") 
mk_fn("id11")

來源

2011-06-13 08:54:19 sarnold

謝謝！我會研究這個替代聲明:)是的，我有大約58個圖像，聲明很長。實際上，那些代碼在我不使用數組的情況下預先加載圖像的時候就剩下了。 – Poch 2011-06-13 23:47:39

懸停效果無法正常工作

回答

相關問題