How to zoom in/out an image using JavaScript?
Just simple. We have to reset the image width and height at runtime. So onclick of an image it will appear as big. Just like zooing in.
Zoom out is also in this same way.
In this example i have placed an image with img id "compman" with width="107" height="98". So it appears as it is when we run the application.
Next on click of button " <input type="button" onclick="changeSize()" value="Change height and width of image"> " calling "changeSize()" function to reset the image size at run time. This is how i am resetting image size in
"document.getElementById("compman").height="250";
document.getElementById("compman").width="300"; " in chageSize() function.
Whenever we click on the button image will appear little big and it gives zoom in effects to the user. Ditto same for zoom out also.
File : Zoom_JS.html
<html>
<head>
<script type="text/javascript">
function changeSize()
{
document.getElementById("compman").height="250";
document.getElementById("compman").width="300";
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" width="107" height="98" />
<br /><br />
<input type="button" onclick="changeSize()" value="Change height and width of image">
</body>
</html>
======================
Publicize yourself ... Free!
http://saalram.com
======================
Jan 24, 2010
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
Saalram.com