Multiple image swap on hover

Question

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 the image, the original image replaces the other image so the new image only appears while the mouse is hovering on the image.

sorry rgin that is exactly what I have been doing for the past 2 hours and with results only showing on how to replace one image or results showing that i didn't understand i thought i would ask the experts. Thanks to everyone for the help. — Dan Davies, Oct 05 '11 at 14:26
I think that question is becoming more and more redundant these days. I mean, I get why people ask it, but when most people go to thetrouble of explaining their problem in detail, in their question, chances are they've already tried everything they know and aren't sure what to do next. Just my thought anyway — jay_t55, May 20 '13 at 06:44

aziz punjani · Answer 1 · 2011-10-05T18:15:24.843

1

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
     }
 );

edited Oct 05 '11 at 18:15

answered Oct 05 '11 at 13:58

aziz punjani

25,586
9
47
56

Hi I am new to all of these but what does the ('#your-picture') part mean? what do i put in there? i have multiple pictures? – Dan Davies Oct 05 '11 at 17:56
Put your pictures in a div and give it an id of #images – aziz punjani Oct 05 '11 at 18:16
thank you, i used a bit of this one and a bit of the one below. got it working, thanks again – Dan Davies Oct 05 '11 at 18:38
No problem, you can mark one of our answers as the correct one, this would help either one of us get points, or even an upvote on both would be appreciated :-) – aziz punjani Oct 05 '11 at 18:45

Teneff · Answer 2 · 2011-10-06T06:35:14.857

1

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') ...

edited Oct 06 '11 at 06:35

answered Oct 05 '11 at 14:07

Teneff

30,564
13
72
103

Hi thank you very much, I have now managed to get the desired effect which is awesome, however it is now trying to change all of the image even my logo when I hover over it. Can you please get back to me on how I can resolve this. – Dan Davies Oct 05 '11 at 15:22
thank you for you help,combining this one and the one above i got it working. really appreciate it guys – Dan Davies Oct 05 '11 at 18:39

score 0 · Answer 3 · edited May 23 '17 at 09:59

0

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

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

edited May 23 '17 at 09:59

Community

1
1

answered Oct 05 '11 at 14:04

ZolaKt

4,683
8
43
66

Multiple image swap on hover

3 Answers3