Jquery thumbnail popup on link 마우스 오버

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에는 마우스 오버와 마우스 아웃을 결합한 마우스 오버 방법이 있습니다. 축소판을 가져 와서 마우스 오버시 표시하고 마우스 출력시 축소판을 숨기는 링크에 함수를 추가 할 수 있습니다.

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

서버 (이 자동으로 수행 할 수 있지만, 당신이 사용하고있는 언어는 말을하지 않습니다)에 이미지의 썸네일을 만들어야합니다

.

또는 실제 이미지를 표시 할 수도 있지만 크기를 변경하면 표시 할 때 축소됩니다. 이러한 이미지가 큰 경우로드 시간이 길어집니다. 구 버전의 IE는 이미지의 크기를 매우 정교하게 조정하지 않습니다. 부드러운 트림을 사용하려면이 트릭을 사용해보십시오.

Bicubic scaling in IE