Javascript Image Zoomin Zoomout
The below javascript program is simple and self explanatory. Create the html file and copy the below code in it. Save the html file and image to be zoomin / zoomout in the same directory or folder.
<html>
<head>
<title>zomminout</title>
<style type="text/css">
#img_zoom
{
width:500px;
height:200px;
margin: 0 auto;
}
img
{
border: solid Gray 3px;
padding: 5px;
}
</style>
<script type="text/javascript" language="javascript">
function zoom(ctrl)
{
var ctrl_id = ctrl.id;
if(document.getElementById("hide_id").value == "")
{
document.getElementById("hide_id").value = ctrl_id;
}
var hide_val = document.getElementById("hide").value;
var pass_id = document.getElementById("hide_id").value;
if(hide_val == 0)
{
setTimeout(function(){zoom(pass_id);}, 1);
var ht = parseInt(document.getElementById(pass_id).height);
var wd = parseInt(document.getElementById(pass_id).width);
document.getElementById(pass_id).style.height = (ht + 1) + "px";
document.getElementById(pass_id).style.width = (wd + 1) + "px";
}
else
{
setTimeout(function(){zoom(pass_id);}, 1); // calling the function zoom() with time delay of 1 milisecond
var ht = parseInt(document.getElementById(pass_id).height);
var wd = parseInt(document.getElementById(pass_id).width);
document.getElementById(pass_id).style.height = (ht - 1) + "px";
document.getElementById(pass_id).style.width = (wd - 1) + "px";
}
if(ht == 400) // maximum limit to zoom in
{
document.getElementById("hide").value = "1";
}
if(ht == 200) // minimum limit to zoom out
{
document.getElementById("hide").value = "0";
}
}
</script>
</head>
<body>
<div id="img_zoom">
<img id="im" src="Pic0016.jpg" height="200px" width="200px" onmouseover="zoom(this);"/>
<input id="hide" type="hidden" value="0" /> <!-- holds value to check whether to zoomin or zoomout -->
<input type="hidden" id="hide_id" value="" /> <!-- holds the id of image to zoom --!>
</div>
</body>
</html>
hey U r gr8 bro
ReplyDelete