jQuery - 在翻转时更改另一个图像的 src答案

【问题标题】：jQuery - Changing the src of another image on rolloverjQuery - 在翻转时更改另一个图像的 src
【发布时间】：2011-08-01 03:44:16
【问题描述】：

我想知道是否有人可以帮助我....我有 2 张图片，如果有意义的话，我希望能够在翻转另一张图片时更改其中一张的 src。

例如，我有 2 张图片

当有人将鼠标悬停在“imimage2.jpg”上时，我希望“imimage1.jpg”更改为“imanewimage.jpg”

jQuery 可以做到吗？

干杯，

【问题讨论】：

标签： jquery

【解决方案1】：

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

或者类似的东西。

【讨论】：

【解决方案2】：

是的。这里已经回答了一种方法：Change the image source on rollover using jQuery

但是，我建议您使用CSS sprites 而不是 src 属性更改。希望 CSS spriting 你能从页面加载时加载的所有图像变体中受益。但是当你改变图片src时，如果它没有被浏览器缓存，它必须去加载它。

【讨论】：

【解决方案3】：

你可以这样做：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') })
})

第二张图片的原始 url 存储在数据对象中。鼠标移出将图像恢复为原始图像。

【讨论】：