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