Question

I have a U.S. map that uses the jQuery Maphilight plug-in (see this Maphilight demo). My code follows:

$('.map').maphilight();

I have combined it with the jQuery qTip plug-in. I have the qTip tool tips set to show when the user hovers over each <area> on the map. My code follows:

$('area').each(function() {
    $(this).qtip({
        content: $(this).attr('data'),
    });
});

So the ‘highlighting’ and the ‘tool tip’ both occur when the user moves over each <area>.

I also have a legend. Using the Maphilight demo above, the legend would have pink, purple, green, and yellow. I want to move over the, e.g., yellow legend key and highlight all of the yellow fields.

To do this, I set a class attribute on each state <area> to its actual color. On each legend-color <area> I set a class="color" and myColor equal to actual color. I have the following JavaScript, which as per the Maphilight documentation, simulates a mouseOver on each <area> to activate the highlighting.

<area class="color" myColor="yellow">
$('.color').mouseover(function() {
    $('.' + $(this).attr('myColor')).mouseover();
});

$('.color').mouseout(function(e) {
    $('.' + $(this).attr(myColor)).mouseout();
});

However, as you can imagine, this also brings up the tool tip for every single state of that color. How can I activate only one mouseOver event when two are bound?

This must be a common jQuery problem that is certainly outside the bounds of this particular scenerio, but I am unsure how to search for it. Is there typically a method in each jQuery plug-in that allows you to simulate the effect on one particular selection (i.e., $('area#some_id'))?

Answer 1

It looks like maphilight is namespacing its events. So, you should be able to do this:

$('.' + $(this).attr(myColor)).trigger("mouseover.maphilight");

EDIT: For info on namespaced events: http://docs.jquery.com/Namespaced_Events