JavaScript to Maximize/Restore HTML image
Many web pages feature images that can be maximized and restored within the same page. There is a simple way to display an image on your web page with maximization and restoration capabilities. I have taken a test image and set the initial height and width. On Click of this image I am calling MaximizeRestore() Script which will simply set the height and width based on restored boolean Flag value. Check out complete JavaScript example below:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.image {width:187px; height:224px; border: 1px solid #000000}
</style>
<script type="text/javascript">
var restored = true
function MaximizeRestore()
{
if (restored == true)
{
document.getElementById("testimage").style.width="374";
document.getElementById("testimage").style.height="448";
restored = false;
}
else
{
document.getElementById("testimage").style.width="187";
document.getElementById("testimage").style.height="224";
restored = true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="testimage" src="images/image.jpg" alt="testimage" class="image" onclick="MaximizeRestore()" />
</div>
</form>
</body>
</html>