jQuery – 在翻转时更改另一个图像的src

我想知道是否有人可以帮助我….我有2个图像，我希望能够在翻转另一个时更改一个src，如果这是有道理的。

例如，我有2张图片

当有人在’imimage2.jpg’上盘旋时，我希望’imimage1.jpg’改为’imanewimage.jpg’

这有可能与jQuery？

干杯，

Answer 1

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

或者接近的东西。

Answer 2

是的。 这里已经回答了一种方法： 使用jQuery在rollover上更改图像源

但是，我建议您使用CSS sprites而不是src属性更改。 希望CSS spriting您可以获得页面加载时加载的所有图像变体的好处。 但是当您更改图像src时，如果它尚未被浏览器缓存，则必须加载它。

Answer 3

你可以这样做： http ： //jsfiddle.net/aqmAn/

HTML：

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以鼠标hover在数据对象中。 鼠标移除将图像恢复为原始图像。