jQuery - Changing the src of another image on rollover

Question

Im wondering if someone could help me .... I have 2 images, and i want to be able to change the src of one when i rollover the other one if that makes sense.

for example, i have 2 images

When someone hovers over 'imimage2.jpg' i want 'imimage1.jpg' to change to 'imanewimage.jpg'

Is that possible with jQuery?

Cheers,

score 3 · Accepted Answer · answered Apr 08 '11 at 01:14

3

$('#image1').hover(function() { $('#image2').attr('src', 'imanewimage.jpg'); }, 
                   function() { $('#image2').attr('src', 'imimage.jpg'); });

Or something close.

answered Apr 08 '11 at 01:14

Talljoe

14,593
4
43
39

score 2 · Answer 2 · edited May 23 '17 at 12:16

2

Yes it is. And one way to do it has already been answered here: Change the image source on rollover using jQuery

However, I would suggest you use CSS sprites instead of src attribute change. Wish CSS spriting you get the benefit of all image variations being loaded on page load. But when you change the image src, if it's not already cached by browser, it has to go load it.

edited May 23 '17 at 12:16

Community

1
1

answered Apr 08 '11 at 01:19

Kon

27,113
11
60
86

score 2 · Answer 3 · answered Apr 08 '11 at 01:22

you can do it like this: http://jsfiddle.net/aqmAn/

html:

<img id='i1' src='http://l.yimg.com/g/images/en-us/home_explore.png.v1'>
<img id='i2' src='http://l.yimg.com/g/images/en-us/home_edit.png.v1'>

javascript:

$('#i1').bind('mouseover',function(){
    $('#i2').data({ original:$('#i2').attr('src') })
    $('#i2').attr({ src:'http://l.yimg.com/g/images/en-us/home_upload.png.v1' })
}).bind('mouseout',function(){
    $('#i2').attr({ src:$('#i2').data('original') })
})

The original url of the second image is stored on mouse-over in a data object. The mouse-out restores the image to the original.

jQuery - Changing the src of another image on rollover

3 Answers3

Linked