Which is easiest solution for hover images

Question

I am looking for some easy jquery solution for hover images.

Like if i define a class. them jquery should get the current image like

abc.png then chnage that to abc_on.png

and then put that to on hover image

How can i do that.

i don't want to add function for every button.

Just one function and it do all.

My Images all usually imagename.png or imagename_on.png

Answer 1

$('img.class').hover(function() {
   var obj = $(this); 
   obj.attr('src', obj.attr('src').replace('.png', '_on.png'));
}, function () {
   var obj = $(this); 
   obj.attr('src', obj.attr('src').replace('_on.png', '.png'));
});

I haven't had a chance to try it, but it should work, as long as .png does not show up in the filename elsewhere.

Edit: A solution that is a little more expensive using regular expressions:

var onRe = new RegExp('\\.(.*)$');
var offRe = new RegExp('_on\\.(.*)$');
$('img.class').hover(function() {
   var obj = $(this);
   obj.attr('src', obj.attr('src').replace(onRe, '_on.$1'));
}, function () {
   var obj = $(this);
   obj.attr('src', obj.attr('src').replace(offRe, '.$1'));
});