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");
        });
});

Answer 2

The solution in that thread applies just as much. Just change the value of src as used in this line

$(this).attr("src", src);

to the absolute paths of the rollover picture's filepath and the regular picture's filepath in the first and second instances, respectively. So for example

var src = "../images/rolloverImages/abc.png";

rather than

var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";