Here, I will show you how to preview Image as a tooltip effect. I mean, you will be able to preview large image when you hover the thumbnail image. The preview is shown as tooltip is shown generally.
As you can see in the js code, I have positioned the top and left for large image with e.pageY and e.pageX. Then, image is added with the img tag. After that, the image is displayed slowly with fadeIn(“slow”). Large image is made hidden with fadeOut function when the cursor is moved away from the thumbnail image.
$(document).ready(function() {
$("#thumbnail img").hover(function(e){
$("#large").css("top",(e.pageY+5)+"px")
.css("left", e.pageX+5)+"px")
.html("<img src="+ $(this).attr("alt") +" alt='Large Image' /><br/>"+$(this).attr("rel"))
.fadeIn("slow");
}, function(){
$("#large").fadeOut("fast");
});
});
Here’s the full source code:
<html>
<head>
<title>Image Preview With Tooltip Effect</title>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#thumbnail img").hover(function(e){
$("#large").css("top",(e.pageY+5)+"px")
.css("left",(e.pageX+5)+"px")
.html("<img src="+ $(this).attr("alt") +" alt='Large Image' /><br/>"+$(this).attr("rel"))
.fadeIn("slow");
}, function(){
$("#large").fadeOut("fast");
});
});
</script>
<style>
img {
border: none;
}
#thumbnail img {
cursor: pointer;
}
#large {
display: none;
position: absolute;
color: #FFFFFF;
background: #333333;
padding: 5px;
}
</style>
</head>
<body>
<div align="center">
<div id="thumbnail">
<h3>Hover over the image</h3>
<img src="images/thumbnails/hills-thumb.jpg" alt="images/hills.jpg" rel="Hills Image" />
<img src="images/thumbnails/lilies-thumb.jpg" alt="images/lilies.jpg" rel="Lilies Image" />
<img src="images/thumbnails/sunset-thumb.jpg" alt="images/sunset.jpg" rel="Sunset Image" />
<img src="images/thumbnails/winter-thumb.jpg" alt="images/winter.jpg" rel="Winter Image" />
<p id="large"></p>
</div>
</div>
</body>
</html>
Thanks.