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

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 或一个类，以使其更易于交互。