cancelling mouseout event when element is overlaid

Hopefully this JSFiddle should illustrate the issue better than my words:

http://jsfiddle.net/pm开发者_如何转开发wRc/6/

I'm displaying an absolutely positioned H4 as a label over an image map when the map is hovered. However, when the mouse pointer is moved over the H4, the image map fires a mouseout, which causes the H4 to be hidden again.

How can I prevent this? I want the label visible while the mouse is over the image map, regardless of whether it's also over the label.

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.

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/

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