在圖像地圖中取消尋找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區域

回答

相關問題