Imagemaps below other div's fail in non-IE browsers

Anyone got a better solution?

[rocknbil]

I've fought with this one for a while on and off over the years, and wonder if there's a more elegant solution. The below code is non-functioning and for example only:

<style>
#mainDiv { position: absolute; left: 0px;top:0px; width:600px;height:300px; visibility:visible; z-index:100; }
#text1 { position: absolute; left: 0px;top:0px; width:300px;height:150px;;visibility: hidden; z-index:200; }
#text2 { position: absolute; left: 0px;top:0px; width:300px;height:150px;;visibility: hidden; z-index:300; }
.....
</style>

<div id="mainDiv">
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr><td><img src="images/spacer.gif" width="300" height="1" border="0"></td>
<td><img usemap="#mymap" src="mymap.gif" width="300" height="300" alt="Mouse Over Me"></td></tr>
</table>
</div>

<div id="text1">This is the text block one</div>
<div id="text2">This is text block two</div>
.....

<map name="mymap">
<area shape="rect" coords="(whatever)" onMouseOver="showLayer('text1');">
<area shape="rect" coords="(whatever)" onMouseOver="showLayer('text2');">
....
</map>

So you have a bottom "box" that's 600 wide, 300 deep, with an image and imagemap in the right 300 pixels, the left 300 pixels are blank. The text blocks are 300 pixels wide and 150 deep - this is important because the style specs indicate these hovering hidden boxes aren't wide enough to "cover" the map. When you mouse over the areas of the map, it shows the appropriate divs.

Works fine in IE for PC. In all other browsers, the map only works if you're BELOW the hidden (or visible) text divs.

That is, even though the div is specified as 150 pixels wide, the imagemap acts as if the divs above it are "covering up" the imagemap and make any actions in that area inaccessable.

Using doctype 4.01 transitional, and the effect is the same whether an actual link is used or a mouseover. As soon as you cross the bottom line of the "hovering" divs at 150px, the cursor turns into a non-clickable arrow and the map is toast.

My "fix" for this is to pull out the imagemap and place it in a div ABOVE the text "layers." Which is silly. Has anyone else encountered this and is there a better solution?

[tedster]

I can't see another way - the image map is being applied to a graphic in a div with a lower z-index. If you want it active cross-browser it need to have the highest z-index.

[rocknbil]

Thx tedster, but as usual there's more to the story. :-)

Each of the mousover areas have a corresponding mouseover div and image. Completed, the solution I used stacks up like this:

several mouseover divs z-index 1000-2000
The imagemap div 900
The text layers to the left 500-800
"main" bottom div that used to contain the imagemap

What's odd is IE allows it. The "covering" div is only 300px wide, and falls short of overlapping the map. Got it to work this way. Just doesn't seem like it's the "best" way.