Javascript onmouseover/out vs. Opera browser

[sachaburnett]

Hi all,

I have an HTML page layout that uses CSS DIVs to position 3 areas: a
top area, a side area, and the main body area.

In the main body area, I have several images that use the Javascript
onmouseover/out effect. The rollover effect works perfectly in Firefox,
Netscape, and MSIE. However, in Opera (I'm using the newest v9.01) it
doesn't work.

What happens in Opera is this:

The first onmouseover works and the image changes from the OFF to the
ON image. But once I move the mouse cursor away from the image, the
image stays in the ON image.

When I put my mouse over the image again, it turns from the ON to the
OFF poisition.

But when I remove the CSS styles, the rollover seems to work fine.

Does anyone know of any gotchas in Opera that would cause this to
happen? It seems to work great in the other browsers I mentioned above.

In case you need more detail, I've included a snippet of my CSS layout
areas and the Javascript code to do the rollover below.

Your help would be greatly appreciated!


CSS code:

#outsidearea {
position:relative;
height: 100%;
top: 0px;
bottom: 0px;
width: 750px;
z-index: 0;
margin: 0px auto;
margin-top: 0px;
}

#sidearea {
position: absolute;
height: 100%;
top: 100px;
bottom: 0px;
width: 160px;
z-index: 1;
}

#mainarea {
position: absolute;
height: 100%;
top: 50px;
width: 500px;
left: 180px;
z-index: 2;
}



HTML and Javascript code:

<script type="text/JavaScript">

var imageon, imageoff;

if (document.images) {
imageoff = new Image();
imageoff.src = '/images/imageoff.gif';

imageon = new Image();
imageon.src = '/images/imageon.gif';
}

</script>

<div id="outsidearea">
(..... some text .....)

<div id="sidearea">
(..... some text .....)
</div>

<div id="mainarea">
<a href="/doc/doc.htm">
<img src="/images/imageoff.gif" onmouseover="this.src=imageon.src;"
onmouseout="this.src=imageoff.src;">
</a>
</div>
</div>