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对象，并在同时具有另一个具有不同名称和不同选项的maphilight功能的情况下切换两者之间的HotSpots？

或者有更好的方法吗？

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＆amp; 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的官方网页。

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

2 个答案: