Use jQuery and Regex to Change All image SRC attributes?

Question

I am working on a site with around 100 images. The images all have a light and a dark version. The light has the string _lt and the dark has the string _dk. I have code that works to change the image manually.

$('img#devbprnt').mouseover(function() {
$('img#devbprnt').attr('src', 'Images/btn_devbprnt_dk.png');    
});
$('img#devbprnt').mouseout(function() {
$('img#devbprnt').attr('src', 'Images/btn_devbprnt_lt.png');    
});

Ideally, what I would like to do is to use $('img') as the selector and any instances of _lt to _dk on mouseover, and do the reserve on mouseout. I think this might be possible with regex, but I don't understand them well enough. Is this possible? If so, can you help point me in the right direction?

Thank you, Jason.

rather than having light and dark versions of images, you might consider appending an element on top of the image and then setting transparency of the element. Not sure if this will work for whatever you're doing, but it's certainly more efficient — Eva
– Eva, Commented Aug 1, 2012 at 16:52
Another thing is that if you need to select them you can use $('img[src$="_lt.png"]') and $('img[src$="_dk.png"]') — Allan Kimmer Jensen
– Allan Kimmer Jensen, Commented Aug 1, 2012 at 16:55

Joseph Silber · Accepted Answer · 2012-08-01 17:00:44Z

1

As pointed out by others, this should be done via CSS.

If for some reason that can't be done, here's how to do it in JavaScript:

$('img[src$="_lt.png"]').hover(function() {
    this.src = this.src.replace(/lt\.png$/, 'dk.png');
}, function() {
    this.src = this.src.replace(/dk\.png$/, 'lt.png');
});

edited Aug 1, 2012 at 17:00

answered Aug 1, 2012 at 16:55

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason T. Bedell Over a year ago

Thanks everyone. These answers got me really close. I really appreciate it. What seemed to finally work was: $('img').mouseover(function() { var src = $(this).attr('src'); src = src.replace("_lt", "_dk"); $(this).attr('src', src); }); $('img').mouseout(function() { var src = $(this).attr('src'); src = src.replace("_dk", "_lt"); $(this).attr('src', src); });

Andrew · Accepted Answer · 2012-08-01 16:58:38Z

1

jQuery also provides a hover() function to do this,

var dark = new RegExp('_dk$'),
    light = new RegExp('_lt$');
$('img').hover(function(){
   var image = $(this);
   image.attr('src', image.attr('src').replace(dark, '_lt'));
},
function(){
   var image = $(this);
   image.attr('src', image.attr('src').replace(light, '_dk'));
});

http://jsfiddle.net/qj5rw/

answered Aug 1, 2012 at 16:58

Andrew

13.9k14 gold badges70 silver badges85 bronze badges

Collectives™ on Stack Overflow

Use jQuery and Regex to Change All image SRC attributes?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related