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