Display Image on Hover

#1
Paulo_Jorge

Posted 02 February 2012 - 06:20 PM

Learning Programmer

Members
54 posts

HI !! I'm building a new website and I want to make a different thing !!

I know how to change the image on hover/ leave effect !!

But I want to do this: when the mouse is over the image, a new SMALLER image is displayed above the current image ??

Like in there : Nivo Zoom - jQuery Image Zoomer

Any ideas ? Wainting for asnwers !!

Thanks !!

#2
wim DC

Posted 03 February 2012 - 12:13 AM

Writes binary right handed and hex left handed

Members
2,084 posts

Programming Language:Java, JavaScript, PL/SQL
Learning:Java

The site you linked does it like this:

<html>
<head>
    <style type="text/css">
         #container {
            position:relative;
            display:inline-block;
        }
        #main-image {
            background: url(img.png) no-repeat;
            z-index:0;
        }
        
        #sub-image {
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            opacity:0;
            background:url(img2.png) center center no-repeat;
            z-index:1;
        }
    </style>
    <script type="text/javascript">        
        function showSubImage(){
            document.getElementById('sub-image').style.opacity = 100;
        }
        
        function hideSubImage(){
            document.getElementById('sub-image').style.opacity = 0;
        }
    </script>
</head>
<body>
    <div id="container" onmouseover="showSubImage();" onmouseout="hideSubImage();">
        <img id="main-image" src="img.png"/>
        <div id="sub-image"></div>    
    </div>
</body>
</html>

Edited by wim DC, 03 February 2012 - 12:58 AM.

#3
Paulo_Jorge

Posted 03 February 2012 - 07:37 AM

Learning Programmer

Members
54 posts

Oh ok , I thought it was another piece of code !! Thanks !! I'm going to test a similar thing in my project !!

Thanks !! I will notice if it worked !!

---------- Post added at 03:37 PM ---------- Previous post was at 02:22 PM ----------

I've tested and two things :

The same code :
1 - in my website page it dont work !!
2- in a new page, without the website styles, it worked, with a little problem !! when the page loads the smaller pic is displayed above the normal image !! but then its works fine !!

Ideas ??

Thanks , anyway !