jQuery Rollover Image

Question

I have a page with a number of images, and I'd like to use a rollover effect for them, i.e., when the viewer moves their mouse over an image, the image source changed. I've tried this Change the image source on rollover using jQuery

But the problem is that my images are in different directories. Also, there are multiple dots in the image files names. It has to do with that the site is built with bigcommerce.

Is there a solution for this?

Answer 1

You can use the function in the example you have given, you will just need to pass in the correct image path for both images, rather than just changing the file name.

$(function() {
    $("img")
        .mouseover(function() { 
            $(this).attr("src", "fullImageUrl/whateverOver.gif");
        })
        .mouseout(function() {
           $(this).attr("src", "fullImageUrl/whatever.gif");
        });
});