area map and swapping images

Hello,

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.

Hard to say for sure without seeing it. Seems pretty simple though. Unless an easier way presents itself, what is commonly done in cases like this is to have a timeout (say 300 milliseconds) be triggered by the mouseout, then any subsequent mouseover of a qualifying area could cancel the timeout. If the timeout is not canceled, it executes, restoring the default image.

But a simpler method would be to not have the mouseout event on any of the areas. Instead have it only on the total area/image. Sometimes this amounts to the same thing though, as often any mouseout event will propagate - bubble up from beneath and trigger the larger area's event. You can try stopPropigation (all current browsers) and cancelBubble (older IE), or use jQuery and use mouseleave, which does this for you. All in all, if you're not already using jQuery, the timeout situation first described would probably be simpler.

To be more specific, I would need to see the page.

Thanks John,

I think I might try the timer approach. I tried setting the mouseout event on the total area (I created a total area in the map that overlaps with all the others), but it doesn't seem to fire. I'm guessing that the other areas in the map are overriding the total area. That is, once I move the mouse over a sub-area, it interprets that as mousing out of the total area. I don't get to the see the default image because the mouseover event for the sub-area has fired. And when I move my mouse out of the sub-area, it fires the mouseout event for THAT area (which now does nothing) and the total area doesn't fire a mouseout event because it already did when you moved the mouse over the sub-area. <-- That's my guess, anyway.

Hopefully, I'll have more luck with the timer.

Right. I think it's actually due to event propagation. Or at least partially. Events on any element also occur on the parent element(s). For example, all clicks anywhere on a page, be they on links, images, whatever, are also clicks on the body element. Same for all other events. Positioning is another potential issue. Say, if one element is positioned relatively, absolutely, or fixed, over another element, unless that element is also a parent, and even sometimes if it is. Events on the covered element will not register because it's technically behind the element that the event actually occurred on. Finally, if you're talking about an area map, those can also yield unexpected results simply because they're a bit non-standard. In modern browsers they should be consistent though. But they still might not be. All in all, if you can set up timers to effectively work this out for you, it can often be the easiest way.

If you want specific help with it, again, please provide a link to the page so I can have a look.