Включение выделения при щелчке для выделения карты jQuery - PullRequest
Новая
       21

Включение выделения при щелчке для выделения карты jQuery

1 голос
/ 19 января 2011

Я делаю диаграммы, используя плагин jQuery Highlight (http://davidlynch.org/js/maphilight/docs/), и у меня в настоящее время есть диаграмма, на которой можно щелкнуть мышью, и загрузка контента основана на области, на которой вы щелкаете (например, на простых вкладках).Мне нужно, чтобы карта выделялась при щелчке и отключала любые другие выделенные области. Сейчас я могу сделать выделение области по щелчку, но не отключать какие-либо существующие выделения. Мне также хотелось бы, чтобы диаграмма переключала содержимое при наведении, ноэто не так важно сейчас, как выделение при нажатии.

Моя текущая версия готова к демонстрации: http://jsfiddle.net/keith/PVpgK/

или результат в полноэкранном режиме: http://jsfiddle.net/keith/PVpgK/embedded/result/

Заранее благодарен за любую помощь

Ответы [ 3 ]

1 голос
/ 04 ноября 2014

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');;
   });
})
1 голос
/ 19 января 2011

Вам нужно пройтись по другим областям и отключить всегда, чтобы последний щелчок не отображался при новом щелчке. Попробуйте что-то вроде этого: 

  //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;
  });
0 голосов
/ 16 сентября 2012

Более эффективным способом было бы добавить класс по клику и удалить его при нажатии на следующую локацию.После добавления класса вы можете манипулировать.Таким образом, если у вас есть сотни или тысячи областей (как на моей карте), страница не блокируется при попытке циклически просмотреть каждую из них.

Следующая ссылка приведет вас к ответу, объясняющему это.https://stackoverflow.com/a/8397900/1101054

...