...

View Full Version : Code not working



Squishinator
06-30-2009, 01:25 AM
Here it is




<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, 03: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, 04:02 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??

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

Old Pedant
06-30-2009, 04:06 AM
So what's the z-index of the other image??

Old Pedant
06-30-2009, 04: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:


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum