Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Code not working

    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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,615
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    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??

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,615
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    So what's the z-index of the other image??

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,615
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •