Share on Google+Share on Google+

Enlarge Image pop up on hovering the image using plugin

Advertisement
In this tutorial, we will discuss about display of enlarge image popup on hovering the "image".

Enlarge Image pop up on hovering the image using plugin

In this tutorial, we will discuss about display of enlarge image popup on hovering the "image". In this Example, 4 images in a table is given. On hovering , it will display enlarge popup of the image . This effect is due to the 'thumbPopup' function of plugin. the plugin used here is "thumbhover.js".

hoverImagePopup.html

<html>
<head>
<script src=jquery-1.4.2.js></script>

<script src="jquery.thumbhover.js"></script>
<script>
$(function(){
$("img[src*='_s.jpg']").thumbPopup({
imgSmallFlag: "_s",
imgLargeFlag: "_l"
});
});
</script>
</head>
<body>
<center><font color="red">
<h2>Mouse Hover on below Image to see effects</h2></font></center>
<table align="center" style="margin-top: 50px;">
<tr>
<td><img src="jquery1_s.jpg" /></td>
<td><img src="jquery2_s.jpg" /></td>
</tr>
<tr>
<td><img src="jquery3_s.jpg" /></td>
<td><img src="jquery4_s.jpg" /></td>
</tr>
</table>
</body>
</html>

OUTPUT

On hovering  image at  1st row & 2nd column :

Download Source Code

Click here to see demo

Advertisements

Advertisement

Posted on: August 2, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.