Code not working

Squishinator · 06-30-2009, 12:25 AM

Here it is

Code:

<script type="text/javascript">
function index1()
{
document.getElementById("Dio").style.zIndex = "2";
}
</script>

<body>
<img Id="Dio" src="Dio2.jpg" width="150px" height="200px" style="position:absolute; left:10px; z-index:-1;" onMouseOver="index1()" />
</body>

Old Pedant · 06-30-2009, 02:54 AM

Not to ask a dumb question, but... How do you KNOW it is not working???

With nothing else on the page, there would be no visible change that would occur by just changing the z-index.

Also: style.zIndex is an integer value, so you don't really need/want the quotes around "2" there. Not that they will hurt; JavaScript will do the string to number (parseInt, presumably) conversion for you.

What did you expect to have happen??

Squishinator · 06-30-2009, 03:02 AM

Quote:

Originally Posted by Old Pedant

Not to ask a dumb question, but... How do you KNOW it is not working???

With nothing else on the page, there would be no visible change that would occur by just changing the z-index.

Also: style.zIndex is an integer value, so you don't really need/want the quotes around "2" there. Not that they will hurt; JavaScript will do the string to number (parseInt, presumably) conversion for you.

What did you expect to have happen??

I have that image partially behind another image, so i can tell its not working.

Old Pedant · 06-30-2009, 03:06 AM

So what's the z-index of the other image??

Old Pedant · 06-30-2009, 03:26 AM

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:

Code:

<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:

Code:

<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.