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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    simple html/js code not working

    i am trying to make a page with 3 images stacked on top of each other, and when you click on one it moves to the top of the stack. i have the code, but i don't understand why it isn't working.


    Code:
    <head>
      <title> Stacking of paragraphs </title>
      <SCRIPT>
    var top ="usb1";
    
    function toTop(newTop) {
    
      domTop =document.getElementById(top).style;
      domNew = document.getElementById(newTop).style;
    
      domTop.zIndex = "0";
      domNew.zindex = "10";
      top = newTop;
    }
    
    </SCRIPT>
      <style type = "text/css">
        .para1 {position: absolute; top: 0; left: 0;
                 z-index: 0;}
        .para2 {position: absolute; top: 50px; left: 110px;
                 z-index: 0;}
        .para3 {position: absolute; top: 100px; left: 220px;
                 z-index: 0;}
    
      </style>
    </head>
    <body>
      <p>
        <img class = "para1" id = "usb1"
             src = "usb1.jpg"
             alt = "(picture of usb1)"
             onclick = "toTop('usb1')" />
        <img class = "para2" id = "usb2"
             src = "usb2.jpg"
             alt = "(picture of usb2)"
             onclick = "toTop('usb2')" />
        <img class = "para3" id = "usb3"
             src = "usb3.jpg"
             alt = "(picture of usb3)"
             onclick = "toTop('usb')" />
    
       </p>
      </body>
     <html>
    also just i side note, but does anyone know how i would write this and use three paragraphs of text instead of pictures, and have the paragraph of text on the top of the other ones readable. (i think that would be a cool affect on a page)

    thank you so much ahead of time for any help you can offer.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    I've cleaned up your code a bit and this now brings the clicked image to the top of the stack.

    Code:
     
    <html>
        <head>
            <title> Stacking of paragraphs </title>
            <style type = "text/css">
                #imgContainer {
                    position: relative;
                }
                .para1 {position: absolute; top: 0; left: 0;
                        z-index: 0;}
                .para2 {position: absolute; top: 50px; left: 110px;
                        z-index: 0;}
                .para3 {position: absolute; top: 100px; left: 220px;
                        z-index: 0;}
                </style>
                <script type="text/javascript">
                    var curMaxZindex = 0;
                    function toTop(obj) {
                        obj.style.zIndex = ++curMaxZindex;
                    }
                    window.onload=function(){
                        var oImgs = document.getElementById('imgContainer').getElementsByTagName('img');
                        //assign the onclick to the img's
                        for(i=0; i < oImgs.length; i++){
                            oImgs[i].onclick = function(){
                                toTop(this);
                            }
                        }
                    }
                </script>
            </head>
            <body>
                <p id="imgContainer">
                <img class = "para1" src = "pic1.jpg" alt = "(picture of usb1)" />
                <img class = "para2" src = "pic2.jpg" alt = "(picture of usb2)" />
                <img class = "para3" src = "pic3.jpg"alt = "(picture of usb3)" />
            </p>
        </body>
        <html>
    Last edited by bullant; 02-25-2011 at 02:54 AM.

  • Users who have thanked bullant for this post:

    nh02173 (02-28-2011)


  •  

    Posting Permissions

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