Эффект наведения не работает должным образом - PullRequest
Новая
       34

Эффект наведения не работает должным образом

0 голосов
/ 13 июня 2011

Я ломал голову над этим с прошлой недели: (У меня есть страница, которая использует интерфейс с вкладками, но меню - это изображение, привязанное к макету карты. Я использовал коды 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, рисунок начинает путаться, смешивая (или, возможно, сохраняя) предыдущие значения. эффект наведения показывает исходную базовую графику.

Странно, что я сталкиваюсь с этой проблемой только в id1 (или в области 1) при переходе из другой области.

Пожалуйста, помогите :( заранее спасибо,

Poch

1 Ответ

0 голосов
/ 13 июня 2011

Если бы я лучше знал 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")
...