Click here to Skip to main content
11,925,307 members (49,703 online)
Rate this:
Please Sign up or sign in to vote.
See more: Javascript CSS
I am working on online shopping cart,My requirement is i want to display mouse over zoom image like below link item

<a href="big.jpg" class="zoom"><img src="small.png"/></a>

But i want to display mouse over image zoom in popup.My problem is my big image (big.jpg) is display in my page footer part.

"I want to display my big image (big.jpg) only when mouse over on small image and i don't want to display that big image in my page. "

please give me any suggestions,and mansion any modification.
Posted 31-Jul-13 3:13am
Edited 31-Jul-13 3:32am
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

This is a really simple thing if you use jQuery.

Let's assume you have two versions of the same image: original one, "big.png", and the one resampled to smaller size, "small.png". The this complete sample will do the trick:
    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
    <img alt="Image" id="image" />
    <script type="text/javascript">
        $(document).ready(function() { // please see the article "How jQuery works" below
            imageElement = $("#image"); // get wrapper using id selector
            imageElement.attr("src", "small.png"); // initial state
            imageElement.hover( // accepts two handler functions:
                function() { // first one, called when mouse goes in
                    $(this).attr("src", "big.png");
                function() { // second one, called when mouse goes out
                    $(this).attr("src", "small.png");
        }); </script>

If you need to learn jQuery (highly recommended), please see:[^],[^],[^],[^],[^] (start from here).

sarath from cst 1-Aug-13 0:37am
Please explain above code briefly.I am new to scripting.What are the components i have to replace in above code.
Sure, please see my updated answer where I added comment on the lines of the sample code.
If something is not clear, please ask questions on a particular aspect.

Please see the description of each method uses in, they are easy to find.
Look at .hover() function, descriptors section, id descriptor ("#..."), .attr(), document.ready().

The idea is: you create "img" element with id="image", without any source file. It won't be shown. On load of the document, add the attribute "src" to link to the "small.png" image file. Then add the .hover handlers invoked when a mouse pointer goes in/out. In the handlers, you do the same thing with the image "src", changing "small.png" to "big.png" and back.

Can you run it all under the debugger?

Anyway, when (and if) it becomes clear enough, please accept the answer formally (green button)?
In all cases, your follow-up questions will be welcome.

Good luck,
sarath from cst 1-Aug-13 10:41am
thank u man
You are welcome.
Rate this: bad
Please Sign up or sign in to vote.

Solution 3

sarath from cst 1-Aug-13 10:42am
nice one yaar thanks a lot
Nirav Prabtani 5-Aug-13 5:34am
welcome... :)
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

sarath from cst 31-Jul-13 9:08am
i am having two different images.And big image is displaying in my page after closing the modal popup also.
sarath from cst 1-Aug-13 10:42am
thanks man

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web04 | 2.8.151126.1 | Last Updated 1 Aug 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100