在点击时启用突出显示jQuery地图突出显示

我正在使用jQuery突出插件（http://davidlynch.org/js/maphilight/docs/）制作图表，我目前有可点击的图表并加载基于内容的在你点击的区域（如简单的标签）。在点击时启用突出显示jQuery地图突出显示

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

我有一个演示我目前的版本升级： http://jsfiddle.net/keith/PVpgK/

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

预先感谢任何帮助

2011-01-18 Keith

您可以通过其他地区需要循环和关闭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; 
    });

来源

2011-01-18 22:43:36 wajiw

@wajiw感谢，简单的解决方案和作品！ – Keith 2011-01-18 23:10:07

@wajiw如果我想在mouseover上显示内容，但没有“stick”直到它被点击，我怎么可以添加到mouseover功能？ – Keith 2011-01-18 23:10:47

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

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

来源

2012-09-16 10:54:42 Allerion

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

来源

2014-11-04 14:59:29 Calete

在点击时启用突出显示jQuery地图突出显示

回答

相关问题