使用 jquery maphilight 保持选定的热点突出显示

Question

我正在使用 David Lynch 的 maphilight 在骨架图像上创建突出显示的区域，以便用户可以选择关节。除了用户现在希望选定区域保持突出显示之外，一切都运行良好。

我现在要做的是突出显示所有图像映射，以便将脚本设置为：

<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 对象，并同时在两者之间切换 HotSpot，并使用另一个名称和选项不同的 maphilight 函数？

或者有更好的方法吗？

Answer 1

看看我的插件 Image Mapster 作为 MapHilight 的替代品。它的用法类似于 MapHilight。默认情况下，区域在选择时保持突出显示。

我不确定我是否理解有关使用两个图像映射的问题 - 这只是关于如何处理选择问题的一个想法吗？一般来说，MapHilight 和 Image Mapster 设置 DOM 来做效果的方式如下：

• 创建一个div，其背景图像与图像映射源相同
• 创建一个或多个相同大小的“画布”元素
• 在图像上覆盖此 div 和所有画布（但最后渲染图像，使其具有最高的 z-index，因此将响应鼠标事件）
• 将img opacity = 0 设为透明

效果是图像映射响应鼠标事件，但它后面的div和canvas元素都是可见的，因为实际的img是透明的。

因此，您可以拥有任意数量的“层”。 ImageMapster 使用了其中的三个：

• 背景图片div
• 一个显示“高亮”效果canvas
• 一个显示所有静态“选定”区域canvas

...除了实际的img。所以我认为你的问题的答案是肯定的，但你实际上并不想使用两个图像映射，只是两个层来显示效果。这就是插件在幕后工作的方式。

Answer 2

只有 jquery&maphighlight 有解决方案！：

诀窍在于处理好 maphighlight 的输入属性之一：alwaysOn：

$( "#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官网。