Question

我正在使用jQuery Highlight插件制作图表（http://davidlynch.org/js/maphilight/docs/）我目前有可点击的图表，并根据您点击的区域加载内容（如简单的标签）。

但是，我需要在点击时突出显示地图并禁用任何其他突出显示的区域。现在，我可以在点击时突出显示区域，但不禁用任何现有的高光。我还想让图表在悬停时切换内容，但现在不像点击时的重点那样重要。

我现在有一个演示版本： http://jsfiddle.net/keith/PVpgK/

或全屏结果： http://jsfiddle.net/keith/PVpgK/embedded/result/

提前感谢您提供任何帮助

Answer 1

您需要遍历其他区域并关闭alwayson以使最后一次点击在新点击时不亮。尝试这样的事情：

  //map clicks
   $(".tabs area").click(function(){

       //AREAS LOOP:
       $(".tabs area").each(function(){
           var d = $(this).data('maphilight') || {};
           if(d.alwaysOn == true){
             d.alwaysOn = false;  
           }
         });

//DISPLAY CURRENT LI FUNCTION:
$('.tabs area').mouseover(function(){

     var thisTarget = $(this).attr("href");

    if(thisTarget){      
        $('#test').innerHTML = thisTarget;  
    }
     $(this).parents(".tabs").find('area.current').removeClass('current');

     $(this).addClass('current');

     $(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
         $(thisTarget).fadeIn("fast");
     });

});
   //This block is what creates highlighting by trigger the "alwaysOn",
   var data = $(this).data('maphilight') || {};
   data.alwaysOn = true;  //NOTICE I MADE THIS ALWAYS TRUE
   $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
   //there is also "neverOn" in the docs, but not sure how to get it to work


   if ($(this).hasClass("current") == false)
   {
       var thisTarget = $(this).attr("href");

       $(this).parents(".tabs").find('area.current').removeClass('current');

       $(this).addClass('current');

       $(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
           $(thisTarget).fadeIn("fast");
       });

   }
   return false;
  });

Answer 2

HTML代码：

<img src="img.jpg" alt="img" usemap="#map">    

<map name="map">
 <area shape="poly" coords="[yourCoords]" alt="img" href="javascript:void(0);" class="punto">
 <area shape="poly" coords="[yourCoords]" alt="img" href="javascript:void(0);" class="punto">
 <area shape="poly" coords="[yourCoords]" alt="img" href="javascript:void(0);" class="punto">
 <area shape="poly" coords="[yourCoords]" alt="img" href="javascript:void(0);" class="punto">
 <area shape="poly" coords="[yourCoords]" alt="img" href="javascript:void(0);" class="punto">
 <area shape="poly" coords="[yourCoords]" alt="img" href="javascript:void(0);" class="punto">
 <area shape="poly" coords="[yourCoords]" alt="img" href="javascript:void(0);" class="punto">
 <area shape="poly" coords="[yourCoords]" alt="img" href="javascript:void(0);" class="punto">
 <area shape="poly" coords="[yourCoords]" alt="img" href="javascript:void(0);" class="punto">
</map>

JS代码

$(function(){
   $('.map').maphilight({
       fillColor: 'ff0000',
       fillOpacity:0.4,
       stroke:false,
       neverOn:true
   });

   $('.punto').click(function(){
       var data = $(this).data('maphilight') || {};
       data.alwaysOn=true;
       $(this).data('maphilight', data).trigger('alwaysOn.maphilight');;
   });
})

Answer 3

更有效的方法是在点击时添加一个类，并在单击下一个位置时将其删除。添加完课程后，您可以进行操作。这样，如果你有数百或数千个区域（就像我的地图一样），那么当你试图遍历每个区域时，页面就不会锁定。

以下链接将带您找到解释此问题的答案。 https://stackoverflow.com/a/8397900/1101054

启用突出显示单击以查看jQuery Map突出显示

3 个答案: