CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
arpymastro
arpymastro

Reputation: 811

overlaying image on another image using javascript

the following code i have tried in fiddle but when i actually get it on my desktop it seems not even working. the images are tried to be overlayed on main image using javascript. i guess i am going somewhere wrong in referencing. a little help will be appreciated.

code:

  <html>
  <head>
    <style>
        div {
            position:absolute;   
        }

        #main {   
            width:256px;
            height:256px;
        }

        #overlay {
            position:absolute;
            height:100px;
            width:100px;
            top:0;
            left:0; 
            display:none;
        }

        .overly {
            position:absolute;
            height:100px;
            width:100px;
            bottom:0;
            right:0; 
            display:none;    
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#main").mouseenter(function() {
                $("#overlay").show();
            });
            $("#main").mouseleave(function() {
                $("#overlay").hide();
            });
        });
        $(document).ready(function() {
            $("#main").mouseenter(function() {
                $("#overly").show();
            });
            $("#main").mouseleave(function() {
                $("#overly").hide();
            });
        });
    </script>
</head>
<body style="margin:0px; padding-top:0px">
    <div>
        <a href="">
            <img id="main" src="image/productold.JPG" />
            <img id="overlay"  src="image/over1.jpg"/>
            <img class="overly" src="image/over2.jpg"/>
        </a>
    </div>
</body>
</html>

Upvotes: 1

Views: 4328

Answers (1)

DearVolt
DearVolt

Reputation: 419

Try adding z-index properties to the styling of the two divs. That should allow you to put one on top of the other. For example:

  #main {   
            width:256px;
            height:256px;
            z-index: 0;
        }

        #overlay {
            position:absolute;
            height:100px;
            width:100px;
            top:0;
            left:0; 
            display:none;
            z-index: 1;
        }

        .overly {
            position:absolute;
            height:100px;
            width:100px;
            bottom:0;
            right:0; 
            display:none;
            z-index: 2;    
        }

For more information on this property, see the W3Schools page on the Z-Index property here.

Upvotes: 2

Related Questions