在图像地图中取消寻找jquery maphilight区域

现在一直在为此奋斗了几个小时。我有一个图像地图，我使用jQuery Maphilight插件来突出显示图像地图的不同区域。在图像地图中取消寻找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'元素并将其添加回来，但插件似乎可以保存状态。

因此，我需要的最终输出是一个类似于幻灯片的图像映射。一个地区的高地，然后移动到下一个。

任何想法？

来源

2013-02-28 Sparda

我还没有看到自2001年以来:) – Brad 2013-02-28 04:02:53

图像映射在所有的严重性，为什么不使用具有精灵图形的div用于不同的状态？这可能会更容易与 – Brad 2013-02-28 04:05:00

@Brad一起工作 - 严格来说，这张图片是CAD渲染的底板，我所说的“区域”元素是该底板内的单元。所以是的，精灵不是一种选择。 :) – Sparda 2013-02-28 04:10:45

我想这就是你要找的。例如，如果你想“非高亮” area1，你可以这样做：

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

它类似于我试过mahilight的榜样页：http://davidlynch.org/projects/maphilight/docs/demo_simple.html。一旦你在那里尝试在你的控制台上运行以下内容：

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

来源

2013-02-28 04:44:32 darshanags

我也在同样的问题上苦苦挣扎。我所做的是我将图像和地图元素封装在单独的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-07 06:09:11 PramodChoudhari

在图像地图中取消寻找jquery maphilight区域

回答

相关问题