CODEWITHSUNDEEP
jqueryimagemap
user141621
user141621

Reputation:

Jquery Map Highlight

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

Upvotes: 2

Views: 13690

Answers (3)

jave.web
jave.web

Reputation: 15032

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.

Upvotes: 0

Jamie Treworgy
Jamie Treworgy

Reputation: 24334

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/

Upvotes: 4

szekelygobe
szekelygobe

Reputation: 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

Upvotes: -1

Related Questions