保管選擇熱點使用jQuery maphilight

我使用maphilight由大衛·林奇的骨幹圖像上創建突出區域，以便用戶可以選擇關節突出。除了用戶現在希望選定區域保持突出顯示外，一切都可以正常工作。保管選擇熱點使用jQuery maphilight

我目前做的是現在有所有的影像地圖的highlighed因此腳本設置爲這樣：

<script> 
    $(function() { 
     $('.body').maphilight({ alwaysOn: true, fade: false, fillOpacity: 0.3 }); 
    }); 
</script>

的當前HTML代碼示例（座標剪斷了）：

<asp:ImageMap class="body" ID="ImageMap1" runat="server" 
    ImageUrl="~/Images/body_hand_foot.jpg" HotSpotMode="PostBack" 
    OnClick="ImageMapEventHandler"> 

    <%-- TMJ --%> 
    <asp:PolygonHotSpot AlternateText="Right TMJ" 
    Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="TMJ-Right" /> 
    <asp:PolygonHotSpot AlternateText="Left TMJ" Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="TMJ-Left" /> 

    <%-- SI Joint --%> 
    <asp:PolygonHotSpot AlternateText="Left SI Joint" Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="SI-Joint Left" /> 
    <asp:PolygonHotSpot AlternateText="Right SI Joint" Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="SI-Joint Right" /> 
</asp:ImageMap

OnClick事件處理程序將PostBackValue存儲到其他用途的表中

是否有可能我可以在彼此之上創建2個ImageMap對象並將第e兩個HotSpots同時擁有另一個具有不同名稱和不同選項的maphilight功能？

還是有這個更好的方法？

來源

2011-07-12 Emmanuel F

看看我的插件Image Mapster作爲替代MapHilight。其用法與MapHilight類似。默認情況下，選定區域時突出顯示。

我不知道我的理解對使用兩個圖像映射的問題 - 這只是關於如何處理的選擇問題的想法？通常，MapHilight和圖像Mapster既建立DOM做它們的效果的方法如下：

創建與背景圖像等於所述相同圖像映射源一個div
創建一個或更多的「畫布」大小相同
覆蓋這個div的圖像（但渲染圖像最後所以它具有最高的z-index，並因此將響應鼠標事件）
充分利用img元素和所有畫布不透明度= 0，所以它是透明的

效果是圖像映射對鼠標事件做出響應，但它後面的div和canvas元素都是可見的，因爲實際的img是透明的。

所以，你可以有許多「層」，只要你想。 ImageMapster使用他們三個：

背景圖像div
一個顯示「高亮」效果canvas
一個顯示所有靜態的「選擇」區域canvas

.. 。除了實際的img。所以我認爲你的問題的答案是肯定的，但你實際上不想使用兩個圖像映射，只有兩個圖層來顯示效果。這就是插件在幕後工作的方式。

來源

2011-07-14 12:40:02

你居然迴應了一個非常相似的[發佈]（http://stackoverflow.com/questions/6470455/imagemap-and-hotspots/6495178#6495178）我有幾個星期前。我記得我在看你的插件，但沒有完全理解它，但是，你沒使我仰視的JavaScript和jQuery這使我maphilight。我會再次看看你的插件，現在我對事物如何協同工作有了更好的理解。感謝您花時間回覆。 –

如果我能幫助你的東西，隨時直接問我，或在github上張貼問題。它具有比maphilight很多更多的選擇，我意識到，試圖使例子展示了它的許多功能，它可能會遇到一個有點勢不可擋:)不過我很樂意幫助你通過任何問題的工作。 –

在jquery &只有maphighlight！：

的訣竅就在於在處理maphighlight輸入的很好的一個屬性：始終開啓：

$("#map-tag area").click(function(){ 
    $(this).data('maphilight', { 
      alwaysOn: true 
    }).trigger('alwaysOn.maphilight'); 
    //check if area wasnt already selected - otherwise gets buggy 
    if(!$(this).hasClass('selected')){ 
     $('.selected').data('maphilight', { 
      alwaysOn: false 
     }).trigger('alwaysOn.maphilight'); 
     $('#map-tag area').removeClass('selected'); 
     $(this).addClass('selected'); 
    } 

});

編輯：請確保您有最新的maphilight！：http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js，從maphilight的官方網頁。

來源

2013-08-06 10:33:27

我希望我有機會再次測試了這一點，但希望別人會發現它很有用。感謝您的評論。 –

完全有效。不錯的工作！ –

保管選擇熱點使用jQuery maphilight

回答

相關問題