0

我正在使用以下代码：

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

});

在这个 HTML 上：

<nav>
<img id="menu_img" src="images/menu/menu_00.gif" alt="Navigation Menu" width="450"   height="900" usemap="#Map" class="centerimg" data-menu-src="images/menu/menu_00.gif">
<map name="Map" class="mainnav">
  <area class="one" shape="rect" coords="55,26,269,69" href="#statement" data-menu-src="images/menu/menu_01.gif">
  <area class="two" shape="rect" coords="234,112,361,159" href="#skills" data-menu-src="images/menu/menu_02.gif">
  <area class="three" shape="rect" coords="129,213,339,256" href="#education" data-menu-src="images/menu/menu_03.gif">
  <area class="four" shape="rect" coords="122,332,370,378" href="#experience" data-menu-src="images/menu/menu_04.gif">
  <area class="five" shape="rect" coords="203,444,391,495" href="#portfolio" data-menu-src="images/menu/menu_05.gif">
  <area class="six" shape="rect" coords="163,550,323,592" href="#contact" data-menu-src="images/menu/menu_06.gif">
  <area class="seven" shape="rect" coords="4,688,436,833" href="#home" data-menu-src="images/menu/menu_07.gif">
</map>
</nav>

这个想法是悬停在图像地图区域上会切换图像的来源。那部分工作得很好。我想知道的是，我怎样才能使这个过渡更平滑或在 mouseenter/mouseleave 上淡入和淡出，而不是立即发生，即淡入新源而淡出旧源？这甚至可能吗？我遇到的所有图像褪色都需要将图像堆叠在一起，然后设置不透明度动画，我希望避免这种情况，因为图像太多。是否有另一种解决方案，最好利用我已有的代码？如果不是，那么实现这一点的最聪明（或更聪明）的方法是什么？

4

2 回答 2

0

尝试这个 -

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

});
于 2013-06-20T20:22:16.807 回答
0

发现这个插件解决了我的图像映射的所有问题：

http://www.outsharked.com/imagemapster/default.aspx?what.html

于 2013-06-21T01:12:27.443 回答