Multiple image swap on hover

Hi Guys I have been looking around for this answer and my head hurts.

I have a page with team members' images and I want it to be such that when you hover over each image, another image of that team member appears. Simple, well I can do it with css for each member but was wondering if there is a way using query so that it can be done by the name of the files, e.g. dan.jp and dan-hover.jpg.

Thanks

Dan

EDIT: I would also like it to be such that when you hover off 开发者_StackOverflow中文版the image, the original image replaces the other image so the new image only appears while the mouse is hovering on the image.

Just user .hover

$('#images img').hover(
     $this = $(this); 
     function(){
         $this.data('src', $this.attr('src') );   // store the current image url on hover
         var img_name_extension = $this.data('src').split('.'); 
         var hover_image = img_name_extension[0] + '-hover.' + img_name_extension[1]; 
         $this.attr('src', hover_image); 
     }, 
     function(){ 
         $this.attr('src' , $this.data('src') ); // revert back to the old image url on hover out
     }
 ); 

I guess you need something like this:

$('img').hover(function(){
    $(this).data('on',
        $(this).attr('src')).attr('src', $(this).data('on').replace(/(\.\w+)$/, "-hover$1")
    );
},function(){
    $(this).attr('src', $(this).data('on'));
});

Edit: to change only specific images you can (for example) do this:

put all the desired images in a container

<div class="desired_images">
    <img src="..." />
    ...
</div>

and then change the jQuery selector to:

$('.desired_images img') ...

There are really a lot of topics and examples on this subject.

For example, look here:
Change the image source on rollover using jQuery