Geek asks and answers

Turn on the backlight. Press the button to highlight JQuery Map Highlighting.

I am making diagrams using the jQuery Highlight plugin (http://davidlynch.org/js/maphilight/docs/), and now I have a diagram that is available for clicks and loading content based on the area you click on (e.g. simple tabs).

However, I need a map to select on click and disable any other selected areas. Right now, I can make the selection of the area a click, but not disable any existing highlights. I would also like the chart to switch the content to freeze, but this is not as important right now as the highlight on the click.

I have the current version for demo: http://jsfiddle.net/keith/PVpgK/

or full screen result: http://jsfiddle.net/keith/PVpgK/embedded/result/

Thanks in advance for your help.

+1
source share
3 answers

You need to scroll through other areas and disable Alwayson so that a new click does not appear 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;
  });
+1
source

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

, . . , ( ), .

, . fooobar.com/questions/1911031/...

0

More articles:


All Articles