I'm wondering if there's a fix to the following problem:
I have an image split up according to an area map. I have each of the areas light up when I mouseover onto them. I do this by swapping out the overall image. That is, for example, if I mouseover onto area1, I swap the image for area1_highlighted.png. If I mouseover onto area2, I swap the image for area2_highlighted.png. I have a default image that I swap in when I mouseout from each area.
This all works fine, but here's the problem. Between mousing out from one area and mousing over into an adjacent area, I very briefly see the default image. I do not want this to happen. It's not because there are any gaps between the areas as I made sure they each share exactly the same coordinates as each other wherever they share a common border. The reason, I suspect, is that the mouseout event fires first (when I leave an area) causing the default image to appear briefly, and then the mouseover event first (when I enter the adjacent area) swapping the default image for the image of the area I entered into.
So here's my question: is it possible to somehow detect when the mouse has moved out of ALL areas vs. when it has moved out of one area but into another? If I can detect that it has moved out of one area and moved into another, I can tell it not to bring up the default image. Otherwise, if it has moved out of all areas, THEN bring up the default image.
And by the way, the default image is NOT just the image with no areas highlight. There is actually one area which I want highlight by default (i.e. it is highlighted even when the mouse is not hovering over the image). So when I move the mouse from one area to another, we briefly see that default area lighting up.