Magento Image Rollover Effect

Question

I want to create a rollover image effect on magento product page and I was wondering if you can point me to a tutorial or extension or perhaps help me with the code.

Answer 1

You can do a simple mouseover function using Jquery or Javascript. Just insert it into the main template. For more info please post more information or a link to a live site.

something like this where img represents the class or id of the images desired for the rollover.

$(function() {

$("img")
    .mouseover(function() { 
        $(this).attr("src", newImageUrl);
    })
    .mouseout(function() {
        var = $(this).attr("src").replace("over.gif", ".gif");
        $(this).attr("src", src);
    });
});`