使用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 
    }); 
});