Grouping area and divs for mouseenter/mouseleave

[macfreek]

Would it be possible to disable automatic highlight events upon mouseover/mouseout events?

I have a imagemap with small textboxes to add some additional information (kind of like tooltips, but sticky). In code:

<map name="demo_map" id="demo_map">
    <div id="area1">
        <area name="area1" shape="circle" coords="40,40,30" href="#" alt="red circle" />
        <area name="area1" shape="rect" coords="60,10,140,40" href="#" alt="blue square" />
        <div name="area1" id="text">Hello!</div>
    </div>
</map>

Ideally, I like the area and div to behave as if it was one area. This is similar to a areagroup with a boundList. Unfortunately, the items in an boundList do not automatically highlight or select. This needs to be programmed. See for example http://jsfiddle.net/macfreek/SLa95/1/ Unfortunately, there is a rather annoying 'flickering' when moving the cursor between div and area. This is caused by a mouseout from one element and a subsequent mouseover from the other element. This is particular visible if the highlight fade is set to a high value (in the above example 0.5 sec).

The common solution is to group the elements, and use mouseenter/mouseleave instead of mouseover/mouseout. See for example http://jsfiddle.net/macfreek/SLa95/2/ Unfortunately, while the mouseenter/mouseleave take care of everything, ImageMapster still fires redundant mapster('highlight', null) events, causing un-highlighting when moving the mouse from an area to a div.

Would it be possible to disable automatic highlights (from mouseover/mouseout events), and so everything manually?

[macfreek]

Some free-form thinking how to support this feature.

• It seems that the mouseenter/mouseleave trick with a parent element is the only way to "group" mouseover/mouseout events. This excludes the existing boundList as a way for ImageMapster to solve this.
• Even if highlight is disabled (set to false in the options), mouseover/mouseout events still trigger and call the mouseover() and mouseout() methods, which in turn call the highlight() and clearEffects() methods. The check if the highlight option is true is only done in highlight(). This means that (1) it is impossible to both disable automatic highlighting by setting the highlight option to false: clearEffects() is still called and (2) calling highlight() from an external method (e.g. the mouseover for the <div>) does not highlight the area. Both effects are undesired.
• The only way to solve this at the moment is to remove the mouseover and mouseout events from all areas after ImageMapster has added them. This is of course very hackerish.

Is there a particular reason to add mouseover and mouseout events to each area, even if highlighting is disabled?

Could ImageMapster be changed so that:

• mouseover() and mouseout() check for the highlight option and return immediately if it is true (without calling highlight() or clearEffects()).
• Alternatively, change ImageMapster so that mouseover and mouseout events are no longer bound to each area when the highlight option is false (this binding currently takes place in buildDataset()).

Would you accept a patch with this change, or would such change pose unexpected side-effects?

[macfreek]

You can test that this at: http://jsfiddle.net/macfreek/SLa95/3/

While all tests in imagemapster-test-runner.html pass, it wouldn't hurt to check how this works, in particular when combining selections and highlights.

FYI, I converted the dist file to contain MS-DOS line-breaks only, so I could push that too.