Question

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

例如，我有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

是的。其中一种方法已在此处得到解答：Change the image source on rollover using jQuery

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

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

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

3 个答案: