Cancelling Mouseout Event When Element Is Overlaid

Hopefully this JSFiddle should illustrate the issue better than my words: http://jsfiddle.net/pmwRc/6/ I'm displaying an absolutely positioned H4 as a label over an image map when

Solution 1:

You could 'cheat' using a transparent image/layer (using your map) which is placed on top of your image.

http://jsfiddle.net/GRPQa/7/

It works using the image map coordinates.

Solution 2:

I know it's not exactly the same but I have modified your fiddle and got a working alternative, just without the image map;) (hover in the middle of 'G' and the first 'o')

http://jsfiddle.net/pmwRc/31/

You can use the style attribute to define coordinates in pure markup if required:

http://jsfiddle.net/pmwRc/33/

Solution 3:

function doSomething(e) {
    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;
    if (tg.nodeName != 'DIV') return;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg != tg && reltg.nodeName != 'BODY')
        reltg= reltg.parentNode
    if (reltg== tg) return;
    // Mouseout took place when mouse actually left layer// Handle event
}

See http://www.quirksmode.org/js/events_mouse.html