It can be something like this:
$(document).ready(function() {
bigOne = "big.png";
smallOne = "small.png";
image = $("#image");
image.attr("src", smallOne);
image.hover(
function() {
$(this).attr("src", bigOne);
},
function() {
$(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