Question

I’m working with the following scenario:
I have an image map with hotspots. When you mouse over an <area> on the image map, shows a <div class="info-panel">. This div overlaps the <area>, so the div is hidden on mouseleave of <div class="info-panel">.

This mostly works, but on the odd occasion, for example if you go ballistic and move the mouse around too fast, the div stays up. I think it may be in the small instances where the <area> and the <div> intersect. I wouldn’t worry about it, only the client has pointed it out as a bug.

The only foolproof way I can think to fix this is to check on mouse move if an info-window is visible. If one is, then check whether the mouse is currently over it — if it’s not, then hide it. This will ensure that an info window is never visible if a mouse is not over it.

My question is: how do I check whether the current mouse position is over an info window? Bearing in mind that this is for the exception rather than the rule, and I don’t know for sure whether an info window is visible or not?

Answer 1

When you mouseout have a timer that runs after 1 second for example, that closes all windows.

When you mouseover be sure to remove that timer… so the timer is only set when you mouseout.

Something like:

var timer; 
$(".window").mouseout(function(){
    $(".window").hide(); // regular hide

    // run the same thing after 1 second
    // to catch windows that are still open
    timer = setTimeout(function(){
        $(".window").hide(); // regular hide
    }, 1000); // 1 second
});

// be sure to remove the timer when you mouseover
$(".window").mouseover(function(){
    clearTimeout(timer);

    // other stuff
});