Jquery thumbnail popup on link Mouseover

Question

Hello All,

I have this peice of coding which simply swaps an image when a link is clicked, I also show some hidden html content which is positioned over the image.

 <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>

Does anyone know how I can further modify this to show a small thumbnail image when the user rolls over the link?

I just need a hint because I'm not sure where to turn to... can I achieve it with mouseover?

Answer 1

jQuery has a hover method that combines mouseover and mouseout. You could add functions to your links that retrieve a thumbnail and display it on mouseover and then hide the thumbnail on mouseout.

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

You will need to create thumbnails of your image on the server (this can be done automatically, but you don't say which language you are using there).

Alternatively, you could just show the actual image, but change its dimensions to shrink it when you display it. Be aware, if these are large images, the loading time will be high. Old versions of IE do not resize images very nicely. Consider using this trick to enable smooth resizing.

Bicubic scaling in IE