我想知道是否有人可以帮助我....我有2张图片,我希望能够在翻转另一张图片时更改一张图片,如果有意义的话。
例如,我有2张图片
当有人在'imimage2.jpg'上盘旋时,我希望'imimage1.jpg'改为'imanewimage.jpg'
这可以用jQuery吗?
干杯,
答案 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以鼠标悬停在数据对象中。鼠标移除将图像恢复为原始图像。