In this article we will explore how to leverage animate feature of jquery to zoom an image on mouseover. Download jquery from http://jquery.com/

Lets see how we can do this.
Step 1: Dowload jquery from the above mentioned url and add it in the head section of the page.
< script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
Step 2: Add below style in the head section of the page
<style type="text/css"> .imgThNail { height: 150px; width: 150px; } </style>
Step 3: Add below jquery in the page.
< script type="text/javascript"> $(function() { $("img.imgThNail").mouseover(function(e) { var newImg = '<img src=' + $(this).attr("src") + '></img>'; $('#sourceDiv') .html($(newImg) .animate({ height: $(this).width() + 40, width: ($(this).width() + 40) }, 10)); var left = ($(this).position().left - 20) + "px"; var top = ($(this).position().top - 20) + "px"; $("#sourceDiv").css({ position: 'absolute', zIndex: 2, left: left, top: top, display: 'block' }); }); $("#sourceDiv").mouseout(function(e) { $("#sourceDiv").css({ display: 'none' }); }); }); document.onclick = check; function check(e) { $("#sourceDiv").css({ display: 'none' }); } </script>
Step 4: Add below images on the page
<div style="padding:40px"> <asp:Image ID="imgA" class="imgThNail" runat="server" ImageUrl="images/Aston_Martin-V12_Vantage_2010.jpg" /> <asp:Image ID="imgB" class="imgThNail" runat="server" ImageUrl="images/Hummer-H3_Alpha_2008.jpg" /> <asp:Image ID="imgC" class="imgThNail" runat="server" ImageUrl="images/Mercedes-Benz-SL63_AMG_2009.jpg" /> <asp:Image ID="Image1" class="imgThNail" runat="server" ImageUrl="images/Suzuki-Swift.jpg" /> <div id="sourceDiv" style="display: none; border: Solid 1px White;"> </div> </div>
Live Demo
This ends the article of zooming image on mouse over using jquery
|