Jquery縮略圖彈出鏈接鼠標移動

Question

我有這種編碼，它只是簡單地交換圖像，當一個鏈接被點擊時，我也顯示了一些隱藏的HTML內容定位在圖像上。

<script> 
if($.browser.msie && parseInt($.browser.version) <= 6){ 
$('#contentone, #contenttwo, #contentthree, #contentfour, .linksBackground').hide(); 
} 

$('#contentone, #contenttwo, #contentthree, #contentfour').hide(); 

$("#linkone").click(function() { 
    $('#contenttwo, #contentthree, #contentfour').hide("1500"); 
    $("#imageone").attr("src","Resources/Images/TEMP-homeOne.jpg"); 
    $("#contentone").show("1500"); 
}); 
$("#linktwo").click(function() { 
    $('#contentone, #contentthree, #contentfour').hide("1500"); 
    $("#imageone").attr("src","Resources/Images/TEMP-homeTwo.jpg"); 
    $("#contenttwo").show("1500"); 
}); 
$("#linkthree").click(function() { 
    $('#contentone, #contenttwo, #contentfour').hide("1500"); 
    $("#imageone").attr("src","Resources/Images/TEMP-homeThree.jpg"); 
    $("#contentthree").show("1500"); 
}); 
$("#linkfour").click(function() { 
    $('#contentone, #contenttwo, #contentthree').hide("1500"); 
    $("#imageone").attr("src","Resources/Images/TEMP-homeFour.jpg"); 
    $("#contentfour").show("1500"); 
}); 
</script> 

有誰知道我可以如何進一步修改這個來顯示一個小的縮略圖圖像，當用戶滾動鏈接？

我只需要一個提示，因爲我不知道該去哪裏......我可以通過鼠標懸停來實現嗎？

Answer 1

jQuery有一個懸停方法，結合了mouseover和mouseout。您可以添加函數到您的鏈接，檢索縮略圖並在鼠標懸停上顯示它，然後在縮略圖上隱藏縮略圖。

$('yourlink').hover(function(){ 
    // display the thumbnail 
}, function(){ 
    // hide the thumbnail 
}); 

您需要將服務器（這可以自動完成，但語言使用的是有你不說）上創建圖像的縮略圖。

或者，您可以只顯示實際圖像，但更改其尺寸以在顯示時縮小尺寸。請注意，如果這些圖像很大，加載時間會很長。舊版本的IE不會很好地調整圖像大小。考慮使用這個技巧來啓用順利調整大小。

Bicubic scaling in IE