jQuery maphilight using "onclick" method

Question

I'm using maphilight plugin, it applies to images with a 'usemap' attribute, and outlines the areas defined in their map on mouseover.

(documentation here: http://davidlynch.org/projects/maphilight/docs/).

I would to trigger the hilight effect with the onClick event instead of "onmouseover".

I do this:

jQuery('.area').click(function(e){
    e.preventDefault();
    
    var data = jQuery(this).mouseout().data('maphilight') || {};
    data.alwaysOn = !data.alwaysOn;
    jQuery(this).data('maphilight', data).trigger('alwaysOn.maphilight');
    
});

It works correctly but I want to erase the hilight effect when I make a new click.

Any ideas?

Answer 1

Look for this part of the code and change:

            $(map).trigger('alwaysOn.maphilight').find('area[coords]')
            .bind('mouseover.maphilight', mouseover)
            .bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });

To this:

            $(map).trigger('alwaysOn.maphilight').find('area[coords]')
            .bind('click.maphilight', mouseover)
            .bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });

Changing the "mouseover" event to "click" will do the trick.