how can i zoom product image on hover ?

I just tried to develop a jQuery method for this:

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

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.

[EDIT]

To download and include jQuery, see http://docs.jquery.com/Downloading_jQuery[^].

To get started, see: http://docs.jquery.com/Tutorials:How_jQuery_Works[^].

—SA