jQuery - Changer le src d'une autre image sur le capot

Question

Je me demande si quelqu'un pourrait m'aider .... J'ai 2 images, et je veux pouvoir changer le src d'un quand je roule l'autre si cela fait sens.

par exemple, j'ai 2 images

Quand quelqu'un passe au-dessus 'imimage2.jpg' je veux 'imimage1.jpg' pour changer 'imanewimage.jpg'

Est-ce possible avec jQuery?

Cheers,

Answer 1

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

ou quelque chose près.

Answer 2

Oui c'est. Et une façon de le faire a déjà été répondu ici: Change the image source on rollover using jQuery

Cependant, je suggère que vous utilisiez CSS sprites au lieu de changement d'attribut src. Souhaitez spriting CSS vous bénéficiez de toutes les variations d'images chargées au chargement de la page. Mais quand vous changez l'image src, si elle n'est pas déjà mise en cache par le navigateur, elle doit aller la charger.

Answer 3

vous pouvez le faire comme ceci: 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') }) 
}) 

L'URL d'origine de la seconde image est stockée sur la souris sur une des données objet. Le mouse-out restaure l'image à l'original.