overlaying image on another image using javascript

Question

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>

i need it to display the info for an each image in an image gallery. — arpymastro
– arpymastro, Commented Nov 4, 2013 at 17:57

DearVolt · Accepted Answer · 2013-11-04 14:41:28Z

2

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.

edited Nov 4, 2013 at 14:41

answered Nov 4, 2013 at 9:00

DearVolt

4695 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

arpymastro Over a year ago

if i am trying to implement the above script for a gallery of images then the z-index specified once will be enough or do i have to specify for each image???

DearVolt Over a year ago

@arpymastro Once should be enough. Just keep in mind other things you might need to put in between, so keep the overlay and overlay z-indexes high; Maybe 99 and 100 respectively.

Collectives™ on Stack Overflow

overlaying image on another image using javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related