1

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?

Community
  • 1
  • 1
Jaeeun Lee
  • 3,056
  • 11
  • 40
  • 60

2 Answers2

5

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");
        });
});
Matthew Darnell
  • 4,538
  • 2
  • 19
  • 29
  • Thanks- what if I want the original images to have different rollover images? – Jaeeun Lee Mar 27 '14 at 21:22
  • There are lots of things you can do here. You can put the image paths as data attributes if you wanted and pull those in that way, or do it all in the JS targeting different image IDs. – Matthew Darnell Mar 28 '14 at 21:25
0

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";
peterx
  • 196
  • 3