Thread: css layers

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    21
    Rep Power
    0

    css layers


    I've tried different implementations, but none seem to be working.

    I have two images crossing over each other using two position: absolute divs. When I click on the one behind using an onClick javascript function, I want that div's z-layer value to change, but none of the sites are helping me. How do I do this?
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    I've made a small example of hot swapping z-indices. It uses the onclick event handler to call a small function.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. what's your moniker?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Highland Park, NJ
    Posts
    201
    Rep Power
    11
    gary,

    that's a great little script! thanks,

    Greg
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    21
    Rep Power
    0
    Thanks, that really clears everything up. I think most of the tutorials I saw used .z-index: , which doesn't work.
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Originally Posted by strattonbrazil
    Thanks, that really clears everything up. I think most of the tutorials I saw used .z-index: , which doesn't work.
    Yeah. The general rule is to convert any hyphenated attribute to the so-called "camel notation."

    Examples:

    z-index ⇒ zIndex;
    background-color ⇒ backgroundColor;
    margin-top-width ⇒ marginTopWidth.

    cheers,

    gary
    Last edited by kk5st; May 3rd, 2004 at 12:48 PM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    21
    Rep Power
    0
    Maybe there's some error in my code I'm not catching, but I'm trying to do the same thing putting two images in the div's and switching them. Is there anything wrong here? I get the alert sometimes, but it never does the switch.

    <style type="text/css">
    /*<![CDATA[*/
    <!--
    #first { position: absolute; left: 10px; z-index: 2; width: 640; height: 480;
    bgcolor: #f88;
    }
    #second { position: absolute; left: 70px; z-index: 3 width: 640; height: 480;
    bgcolor: #88f;
    }

    body {
    padding: 0;
    margin: 0;
    font: 100% arial, sans-serif;
    color: #333;
    background-color: white;
    }

    p {
    font-size: 1em:
    }

    #div1 {
    position: absolute;
    top: 100px;
    left: 100px;
    height: 150px;
    width: 150px;
    background-color: #f88;
    }

    #div2 {
    position: absolute;
    top: 150px;
    left: 150px;
    height: 150px;
    width: 150px;
    background-color: #88f;
    }

    /*]]>*/
    -->
    </style>
    <script type="text/javascript">
    function toFront(onBottom) {
    alert(onBottom + "Ugg");
    document.getElementById(onBottom).style.zindex = '2';
    document.getElementById(onTop).style.zindex = '1';
    }
    </script>
    <body>
    <div id="div1" onClick="toFront('div1','div2')">
    <img name="headerpiece" src="images/theroyalbangs.jpg" width="100%" height="100%">
    </div>
    <div id="div2">
    <img name="centerpiece" src="images/sam1.gif" onClick="centerpiece.src='images/sam2.gif'">
    </div>
    </body>
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    21
    Rep Power
    0
    Oops, in my code I really do pass the function two parameters...
  14. #8
  15. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Before making all the changes, use my code verbatim. Then, you can add/modify one thing at a time. If it breaks, you'll know what broke it.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo