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?