在图像地图中取消突出显示 jquery maphilight 区域答案

【问题标题】：Un-hilighting a jquery maphilight area in an Image map在图像地图中取消突出显示 jquery maphilight 区域
【发布时间】：2013-02-28 03:48:54
【问题描述】：

现在已经为此苦苦挣扎了几个小时。我有一个图像地图，我正在使用 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 属性。我什至尝试删除整个“地图”元素并重新添加它，但插件似乎保存了状态。

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

有什么想法吗？

【问题讨论】：

自 2001 年以来我还没有看到图像地图 :)
说真的，为什么不为不同的状态使用带有精灵图形的 div 呢？使用起来可能会更容易
@Brad - 说真的，这张图片是 CAD 渲染的地板，我所说的“区域”元素是该地板内的单元。所以，是的，精灵不是一种选择。 :)

标签： jquery imagemap

【解决方案1】：

我认为这就是您要寻找的。例如，如果您想“取消突出显示”area1，您可以这样做：

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

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

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

【讨论】：

【解决方案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() 它会像魅力一样发挥作用

【讨论】：