Creating button rollovers with jQuery

Question

I'm trying to make a function that I can use globally to create rollover states for images. Basically, I want to be able to add a class to an image, and then when you rollover it, jquery will use the same image name, and same extension, but add "-over" to the file name. (I'll have an image with the rollover state named the same as the non rolled over state except with the -over on it. I came up with this, but it's not working. Am I doing something wrong or does anyone know of a better way to do it?

$('.btn').hover(function(){
    $(this).attr("src").split(".jpg").join("Over.jpg"));
});

image:

<img src="/static/images/overlay-close-button.jpg" alt="Close" title="Close" id="our-staff-overlay-close" class="btn"/>

Thanks!

EDIT: Is there any way to make it non specific to the file time, where it can figure out any file type rather than just jpgs?

I'm using:

$('.btn').hover(function(){
    this.src = this.src.split(".jpg").join("Over.jpg");
}, function() {
    this.src = this.src.split("Over.jpg").join(".jpg");
 });

and it's working great

EDIT 2: Can I also add an active state (when the button is being clicked)?

To make a similar thing for clicks, you can take the code in my answer below and hook it into the .mousedown (for adding the -over) and .mouseup (for removing the -over) — Alex Vidal, Jan 03 '11 at 19:30

Alex Vidal · Accepted Answer · 2011-01-03T18:59:09.197

The splitting and joining should work as intended, you just need to set that back to the src attribute of the img:

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.split('.jpg').join('-over.jpg');
    $(this).attr("src", src);
});

Also, if you want it to work with any extension, you could use a regular expression like this:

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
    $(this).attr("src", src);
});

The regular expression matches anything that ends with a period followed by one of png, gif, jpg, or jpeg, and replaces it with the first part (the path + filename), the string "-over", a period, and the original extension.

You can replace it back to the original state by removing the -over from the source:

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
    $(this).attr("src", src);
}, function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)-over\.(png|gif|jpg|jpeg)$/, "$1.$2");
    $(this).attr("src", src);
});

The jQuery().hover event accepts two functions, the first one is called when you start the hover, the second one is called when you exit the hover.

Your answer is really smart ! – Sébastien Gicquel Jan 11 '13 at 12:58 — Sébastien Gicquel, Jan 11 '13 at 12:58

score 1 · Answer 2 · answered Jan 03 '11 at 18:53

1

You're just not doing anything with the result. In this case you want to set the src (which can be done a few ways), here's the most efficient example (without changing your .split().join() method):

$('.btn').hover(function(){
  this.src = this.src.split(".jpg").join("Over.jpg");
}, function() {
  this.src = this.src.split("Over.jpg").join(".jpg");
});

answered Jan 03 '11 at 18:53

Nick Craver

623,446
136
1,297
1,155

Tried that, and nothing changes when I rollover the image – Bill Jan 03 '11 at 18:58
@Phil - Is this inside a `document.ready` handler. so the `$('.btn')` selector runs after the elements are present in the DOM? – Nick Craver Jan 03 '11 at 18:59
I think it's because I had that code above the jquery file call, and it was saying that $.... is not defined – Bill Jan 03 '11 at 19:01
Yup... that was the problem. Works now – Bill Jan 03 '11 at 19:02

score 0 · Answer 3 · answered Jan 03 '11 at 18:54

0

$('.btn').hover(function(){
    $(this).attr("src", this.src.split(".jpg")[0] + "-over.jpg");
}, function() {
   $(this).attr("src", this.src.split("-over.jpg")[0] + ".jpg");
})

answered Jan 03 '11 at 18:54

Josiah Ruddell

29,697
8
65
67

score 0 · Answer 4 · answered Jan 03 '11 at 19:53

You may want to consider achieving your rollover effect using pure CSS. It's really not necessary to involve script in something as trivial as a image rollover. Plus, a pure CSS approach will still work for the paranoids out there who browse with script turned off.

Use the :hover and :active pseudoclasses and take advantage of CSS sprites.

The downside here is that this method is harder to make generally applicable because you need to know the size of your images before-hand.

Creating button rollovers with jQuery

4 Answers4