悬停效果无法正常工作

Question

从上周开始我就一直在绞尽脑汁地思考这个问题:(我有一个页面使用选项卡式界面，但菜单是与地图布局相关的图形。我所做的是使用 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”）开始，它也可以正常工作。 ，我将鼠标悬停在除当我从其他区域之一单击区域 1 时，代码会按预期工作。因此，例如，我在区域 2 中单击区域 1，图像更改开始变得混乱。

例如，在初始加载时，图像应该显示 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 约定，而是通过混合（或可能保留）以前的值而开始变得混乱。悬停效果显示了原始的基本图形。

奇怪的是，当我从其他区域转换时，我只在 id1（或区域 1）中遇到这个问题。

请帮忙:(提前感谢，

Poch

Answer 1

如果我更了解 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";

有几种方法可以改进这一点；对于具有格式化打印例程的语言，它看起来像这样：

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