Enabling Highlight On Click for jQuery Map Highlig

Question

I am making diagrams using the jQuery Highlight Plugin (http://davidlynch.org/js/maphilight/docs/) and I currently have the diagram that is clickable and loading content based on the area you are clicking on (like simple tabs).

However, I need the map to highlight on click and disable any other highlighted areas. Right now, I can make the area highlight on click, but not disable any existing highlights. I'd also like to have the diagram switch the content on hover, but that isn't as important right now as the highlight on click.

I have my current version up for a demo: http://jsfiddle.net/keith/PVpgK/

or the fullscreen result: http://jsfiddle.net/keith/PVpgK/embedded/result/

Thanks in advance for any help

Answer 1

HTML Code:

<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 Code

$(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 2

A more efficient way would be to add a class on click and remove it when clicking the next location. After adding the class you can manipulate. That way if you have hundreds or thousands of areas (as my map does) the page doesn't lock up while trying to cycle through each one.

The following link takes you to an answer that explains this. https://stackoverflow.com/a/8397900/1101054

Answer 3

You need to loop through the other areas and turn off the alwayson to have the last click unhighlight on a new click. Try something like this:

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