Click here to Skip to main content
15,905,679 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
image preview on mouse over and mouse out using jquerry
Posted

It can be something like this:

JavaScript
$(document).ready(function() {
    bigOne = "big.png";
    smallOne = "small.png";
    image = $("#image");
    image.attr("src", smallOne);
    image.hover(
        function() { // mouse pointer goes over the image
            $(this).attr("src", bigOne);
        },
        function() { // mouse pointer goes out
            $(this).attr("src", smallOne);
        }
    );
});


You need to have two versions of the same image with different sizes in pixels; in my code sample, "big.png" is a full-size one, and "small.png" is scaled down by re-sampling; this version is used from the very beginning and when mouse is not over the image.

In HTML, the image should be marked with ID attribute "image" (just for example, matching the above JavaScript sample):
HTML
<img alt="Some image" id="image" />


I works, tested.

—SA
 
Share this answer
 
v2
hi,
look at this LINK
it is a very pretty looking web image viewer. You definitely like this
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900