layered elements react to mouse differently in Moz1 - IE6.

Hi

I think this is a dom thing. I have a large img overlayed by three 'hidden' divs which I use as button hit zones. In Moz they work fine but in IE6 the img insists on being in front of the hit zones thereby blocking them from being able to 'see' the mouse.

Here is what I think is the relevant code (a little messy because i'm messing around with it)


------>> the large img <<------

<div id="pitch"> <!-- image map -->

------>> soccer players <<-------

<img id="home_pitch" border="0" src="./images/soccer_pitch_03.png" alt="Drawing of a soccer pitch.">

<img id="def_1" border="0" src="./images/arrow_purple_left_02.png" alt="A Little Defender">
<img id="def_2" border="0" src="./images/arrow_purple_left_02.png" alt="A Little Defender">

----->> img icons of many little soccer players clipped <<-------

----->> the hit zones <<-------

<!-- <span id="map_offense" onmouseover="omo(this, event)" onmousedown="omd(this,event)" onmouseup="omu(this,event)" onmouseout="omt(this,event)" onclick="goHere(this)"></span> -->

<span id="map_offense" onmousedown="showText(this,event)" onclick="goHere(this)"></span>

<span id="map_neutral" onmouseover="omo(this, event)" onmousedown="omd(this,event)" onmouseup="omu(this,event)" onmouseout="omt(this,event)" onclick="goHere(this)"></span>

<span id="map_defense" onmouseover="omo(this, event)" onmousedown="omd(this,event)" onmouseup="omu(this,event)" onmouseout="omt(this,event)" onclick="goHere(this)"></span>




hit zone css sample:


#map_neutral
{
position: absolute;
top: -1%;
left: 30%;
width: 34%;
height: 100%;
}


large image css:

#pitch
{
position: absolute;
width: 55%;
height: 55%;
top: 24%;
left: 22%;
}



Thanks.

Well, iew is messy in this respect, with click-through and such. However, start out by giving your overlays a solid background colour to show if they are positioned as you want them in iew. Then we can work from there.

Thank you, yes I have done that - they are in the right place in both browsers.

Okay, they are in the right place and above the image, then?
Now test whether they trigger the mouse events when you have a solid background colour. Just use some dummy background-color changing event.

Then try the same but with a fully transparent layer as standard.

The background img is a solid color.

Sorry, I guess you mean the overlays - too many things going on at once. :eek:

I'm going to be working on an assignment for school the next couple of days so I won't be doing much on this.

Thanks very much for your help - I'll be back soon