悬停效果无法正常工作

自从上周以来，我就一直在抨击我的大脑：（我有一个使用标签界面的页面，但菜单是一个与地图布局绑定的图形，我所做的是我使用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

悬停效果无法正常工作

回答

相关问题