2

I'm using http://plugins.jquery.com/project/maphilight for highlighting areas when I hover over an image map, but I'd also like to keep it highlighted when clicked. When another area is clicked, the previous one should fade out and the new one stay highlighted.

Has anyone seen this done or know a way to do this?

Many thanks, C

  • Some code would be nice. Are u setting fade: true, alwaysOn: false? – Tim Sep 20 '10 at 09:52
  • Actually, found this, http://davidlynch.org/js/maphilight/docs/demo_features.html Works but is quite clunky for what I need to do. Flash it is. –  Sep 20 '10 at 10:26

3 Answers3

4

ImageMapster: http://www.outsharked.com/imagemapster - my jQuery plugin that does exactly this!

You want to use the singleSelect option, e.g. http://jsfiddle.net/jamietre/ufAF6/

Jamie Treworgy
  • 23,934
  • 8
  • 76
  • 119
0

There is a solution in jquery&maphighlight ONLY!:

And the trick is in handling good one of the maphighlight's input attributes: alwaysOn:

$( "#map-tag area" ).click(function(){
    $(this).data('maphilight', { 
          alwaysOn: true 
    }).trigger('alwaysOn.maphilight');
    //check if area wasnt already selected - otherwise gets buggy
    if( !$(this).hasClass('selected') ){ 
      $('.selected').data('maphilight', {
          alwaysOn: false
      }).trigger('alwaysOn.maphilight');
      $('#map-tag area').removeClass('selected');
      $(this).addClass('selected');
    }

});

EDIT: make sure you have the latest maphilight ! : http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js , from maphilight's official webpage.

jave.web
  • 13,880
  • 12
  • 91
  • 125
  • How does one go about handling the responsiveness when an area of the map remains highlighted? The selected area does not scale down with the image map so it looks off. – EHerman Jun 12 '14 at 17:39
  • If you mean how to handle highlights when your areas works responsive, you could "redraw" the highlight on every size change that would change the areas, anyway if you already have a responsive area it shouldn't be so hard for you to make the highlights reponsive too :) – jave.web Jun 19 '14 at 07:04
-1

The solution for this problem is at http://davidlynch.org/js/maphilight/docs/demo_features.html

if you look in the page's source, there is the code for your problem. IMPORTANT : you need the jquery.metadata.js plugin!!!!

Regards szekelygobe

szekelygobe
  • 1
  • 1