Ahhh...fascinating! If the other <img> doesn't have <style> that includes positioning info, then indeed the z-index is wrong.
But when I gave the other image minimal style, it then worked fine. Example:
<script type="text/javascript">
function index1()
{
document.getElementById("Dio").style.zIndex = 2;
}
</script>
<body>
<img src="tshirt_blue.jpg"
style="position: relative; z-index: 1;" />
<img Id="Dio" src="tshirt_pink.jpg"
style="position:absolute; top: 0px; left: 100px; z-index: -1;"
onMouseOver="index1()" />
</body>
Notice that putting in "position: relative;" and then no actual positioning doesn't change how the other image appears, at all, so it's a non-invasive style.
I guess I've just always put my images inside of <div>s before when doing this kind of stuff, so I never noticed this oddity.
OH FOR CRYING OUT LOUD!
All above was written about MSIE. Changed over to Firefox, and now indeed NONE of it works!
AHA! Found it. A z-index of -1 means that onmouseover will never work, with FF.
SO changed to this:
<script type="text/javascript">
function index1()
{
document.getElementById("Dio").style.zIndex = 99;
}
</script>
<body>
<img style="position: relative; z-index: 2;"
src="tshirt_blue.jpg" />
<img Id="Dio" style="position:absolute; top: 0px; left: 100px; z-index: 1;"
onMouseOver="index1()"
src="tshirt_pink.jpg" />
</body>
Now works on both.
Odd.
