为 jQuery 地图突出显示启用单击时突出显示

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

一种更有效的方法是在单击时添加一个类，并在单击下一个位置时将其删除。添加类后，您可以操作。这样，如果您有成百上千个区域（就像我的地图那样），页面在尝试循环浏览每个区域时不会锁定。

以下链接将带您到解释这一点的答案。 https://stackoverflow.com/a/8397900/1101054

Answer 3

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');;
   });
})