Question

我使用以下代码：

-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中淡入淡出，而不是立即发生，即淡出旧源同时淡出旧源？这甚至可能吗？我遇到的所有图像淡入淡出都要求将图像叠加在一起，然后设置不透明度，我希望避免这种图像有很多。还有其他解决方案，最好是利用我已有的代码吗？如果不是，那么最聪明（或更聪明）的方法是什么呢？

Answer 1

试试这个 -

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

});

Answer 2

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

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

Jquery - 在imagemap上平滑/淡化图像源交换？

2 个答案: