使用jQuery悬停切换

Question

我想改变鼠标我的图像宽度在与jQuery切换，或让我知道，如果我能拨动

Answer 1

这个怎么样两个影像即small_image和使用jQuery large_image之间切换改变图像宽度：

$("#img_id_here").mouseover(function() 
{ 
    $(this).css('width', '200px'); 
}); 

你甚至可以尝试了这一点太：

<img src="whatever" onMouseOver="this.style.width='200px'" /> 

也可以用CSS来实现：

<style type="text/css"> 
.img:hover /* you should apply img class to your image. */ 
{ 
    width:200px; 
} 
</style> 

Answer 2

比使用CSS更容易。

风格：

.photo .large { display: none; } 
.photo:hover .small { display: none; } 
.photo:hover .large { display: inline; } 

HTML：

<div class="photo"> 
    <img class="small" width="60" height="40" src="smallimage.jpg" /> 
    <img class="large" width="600" height="400" src="largeimage.jpg" /> 
</div> 

注：IE 6只支持：悬停在链接，那么你将不得不作出容器中的链接一个div，而不是支持IE 6.

Answer 3

要获得最佳图像，他们通常需要以实际大小显示。实现使用两个图像的一种方法是将SRC属性与鼠标悬停和鼠标移出事件（jQuery中的.hover（））上的脚本交换。

使用一些约定，可以避免硬编码和划定需要'可缩放'的标准和大图像文件名/位置。

图像文件：
（把所有标准尺寸的图像（比如）/ IMG /目录下;把图像的全尺寸版本/ IMG /大/）

example.com/img/tree.jpg 
example.com/img/lake.jpg 
example.com/img/big/tree.jpg 
example.com/img/big/lake.jpg 

HTML：

<img class="zoomable" src="/img/tree.jpg" /> 
<img class="zoomable" src="/img/lake.jpg" /> 

的jQuery：

$(document).ready(function() { 
    $("img.zoomable").hover(
    function(){ 
     var src = $(this).attr('src'); 
     $(this).attr('src', src.replace('/img/', '/img/big/')); //swap to big 
    }, 
    function(){ 
     var src = $(this).attr('src'); 
     $(this).attr('src', src.replace('/img/big/', '/img/')); //swap back to small 
    }); 
});