CODEWITHSUNDEEP
jquery
BigJobbies
BigJobbies

Reputation: 4343

jQuery - Changing the src of another image on rollover

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,

Upvotes: 2

Views: 7506

Answers (3)

Billy Moon
Billy Moon

Reputation: 58521

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.

Upvotes: 2

Kon
Kon

Reputation: 27431

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.

Upvotes: 2

Talljoe
Talljoe

Reputation: 14827

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

Or something close.

Upvotes: 3

Related Questions