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

时间:2011-04-08 01:10:14

标签: jquery

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

例如,我有2张图片

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

这可以用jQuery吗?

干杯,

3 个答案:

答案 0 :(得分:3)

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

或者接近。

答案 1 :(得分:2)

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

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

答案 2 :(得分:2)

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