在點擊時啓用突出顯示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地圖突出顯示

回答

相關問題