0

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

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

有任何想法吗？

4

2 回答 2

0

我也在为同样的问题而苦苦挣扎。我所做的是将图像和地图元素包装在单独的 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() 它会像一个魅力

于 2015-03-07T06:09:11.307 回答
0

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

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

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

$('area:eq(1)').unbind('.maphilight');
于 2013-02-28T04:44:32.000 回答