Question

现在已经挣扎了好几个小时了。我有一个imagemap，我使用jQuery Maphilight插件来突出显示图像映射的不同区域。

该插件工作正常，但我找不到一种方法来取消突出显示活动区域。我试着清理画布。

标记：

<img src="someImage" usemap="#levelMap" id="floorplan" />
<map name="levelMap">
  <area id="area1" shape="poly" coords="316,56,334,56">
  <area id="area2" shape="poly" coords="460,84,537,85">
</map>

代码：

$('area').eq(0).attr('data-maphilight','{"fillColor":"000000","alwaysOn":true}'
$('#floorplate').maphilight();

这突出了第一个区域。现在，我正在侦听一个自定义事件，它告诉第二个区域是活动区域而不是第一个区域。此时，

$('area').removeAttr('data-maphilight'); // Remove the attribute from all area elements.
$('area').eq(1).attr('data-maphilight','{"fillColor":"000000","alwaysOn":true}' // Add attribute for the next area.
$('#floorplate').maphilight(); // Call the plugin again to execute on the latest active area.

执行上述操作会突出显示新区域，但即使它没有maphilight属性也不会删除旧区域。我甚至试图删除整个'map'元素并再次添加它，但插件似乎保存了状态。

所以，我需要的最终输出是一个类似于幻灯片放映的图像映射。一个区域hilights，然后移动到下一个。

有什么想法吗？

Answer 1

我认为这就是你要找的东西。例如，如果你想“un-hilight”area1，你可以这样做：

$('area#area1').unbind('.maphilight');

这与我在mahilight的示例页面上尝试的类似：http://davidlynch.org/projects/maphilight/docs/demo_simple.html。在那里尝试在控制台中运行以下命令：

$('area:eq(1)').unbind('.maphilight');

Answer 2

我也在努力解决同样的问题。我做的是我将图像和地图元素包装在单独的div中，然后应用maphilight并解决问题。

<div id='image'> <image src='yourimage' class='mapclass' usemap='#mymap'></div>

然后您的<map>代码如下

<div id='map'> <map name='mymap'> <area></area> </map> </div>

然后申请$('.mapclass').maphilight() 它会像魅力一样工作

在图像映射中取消hquery jquery maphilight区域

2 个答案: