mouse over and mouse out using jquerry

It can be something like this:

$(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):

<img alt="Some image" id="image" />

I works, tested.

—SA