Question

我有以下代码：

<img src="images/menu-home-off.png" width="153" height="37" border="0" usemap="#menuhome" />
<map name="menuhome" id="menuhome">
<area shape="poly" coords="12,0,153,0,153,35,1,35" href="#" />
</map>

地图（menuhome）仅占用图像选择（menu-home-off.png）。目标是当鼠标滚过图像的地图（menuhome）区域时，将menu-home-off.png交换到menu-home-on.png。

我在图像交换代码片段上发现了很多jquery鼠标，但是不能确定如何应用这样的东西。页面上还会有许多地图/图像

Answer 1

这不适合你吗？

$('#menuhome area').on('hover', function(e){
    console.log("hovered.");
});

实施例： http://jsfiddle.net/6ReMp/3/

Answer 2

$('area').mouseover(function() ....不适合你吗？

如果您要添加多个区域，请确保为每个区域添加一个ID或类，以便于与其进行交互。

如何使用usemap鼠标悬停在img的映射区域上时使用jquery触发图像交换

2 个答案: