0

我想在图像地图中的某个区域上悬停时执行图像交换。这是代码：

<div class="menu">
<img src="images/menu/menu_0.gif" alt="Navigation Menu" width="400" height="600" usemap="#Map" class="nav">
<map name="Map" class="mainnav">
  <area class="one" shape="rect" coords="23,61,255,110" href="#about">
  <area class="two" shape="rect" coords="215,154,342,201" href="#skills">
  <area class="three" shape="rect" coords="110,257,320,300" href="#education">
  <area class="four" shape="rect" coords="117,381,342,423" href="#experience">
  <area class="five" shape="rect" coords="171,485,359,536" href="#portfolio">
</map>
</div>

当我将鼠标悬停在“.one”（或 .two .three 等）区域时，我想将“.nav”中的图像源交换为“menu_1.gif”（分别为 menu_3.gif menu_4.gif）。我尝试了一个简单的 jquery 交换，但我不知道如何在同一个 div（.nav 图像 src）中为交换定位一个单独的元素。我发现的所有图像交换都使用“this”作为选择器。

我从这个 jquery 开始：

jQuery(function(){
     $(".one").hover(
          function(){this.src = this.src.replace("_0","_1");},
          function(){this.src = this.src.replace("_1","_0");
     });
});

但是我过去尝试的一切都只是在黑暗中拍摄，没有任何效果，因为我不知道如何选择正确的元素来更改图像的来源。

4

1 回答 1

1

试试这个：

演示

HTML：

<div class="menu">
<img id="menu_img" src="images/menu/menu_0.gif" alt="Navigation Menu" width="400" height="600" usemap="#Map" class="nav" data-menu-src="images/menu/menu_0.gif">
<map name="Map" class="mainnav">
  <area class="one" shape="rect" coords="23,61,255,110" href="#about" data-menu-src="images/menu/menu_01.gif">
  <area class="two" shape="rect" coords="215,154,342,201" href="#skills" data-menu-src="images/menu/menu_02.gif">
  <area class="three" shape="rect" coords="110,257,320,300" href="#education" data-menu-src="images/menu/menu_03.gif">
  <area class="four" shape="rect" coords="117,381,342,423" href="#experience" data-menu-src="images/menu/menu_04.gif">
  <area class="five" shape="rect" coords="171,485,359,536" href="#portfolio" data-menu-src="images/menu/menu_05.gif">
</map>
</div>

jQuery :

jQuery(function(){
    $("map.mainnav area")
      .on("mouseenter", function(){
        $("#menu_img").attr("src", $(this).data("menu-src"));
      })
      .on("mouseleave", function(){
        $("#menu_img").attr("src", $("#menu_img").data("menu-src"));
      });
});

据我记得，不推荐使用“hover()”。

于 2013-06-14T04:35:45.847 回答