Maximizing and Restoring HTML Images: Layer Method - Operation
(Page 3 of 4 )
The title attribute of an HTML element is used to produce a tool tip when the mouse pointer is over the element. Our image is given a title attribute, which says, “Click to maximize.” When the image is clicked it is maximized; the tool tip is changed to “Click to Restore.” When you click the maximized image, it is restored; the too tip says “Click to maximize” again.
Unfortunately the tool tip may not show long enough for the user’s satisfaction. So to make sure that the user knows that he can click the image to maximize, on the web page, I have written just below the image, “Quality Watch (Click to maximize).”
Accomplishing it with JavaScript and CSS
I will give you the code before I explain how it works. There is one associated image file with the code. After going through this article, you can try the code.
<html>
<head>
<style type="text/css">
body {z-index:0}
img.watch {width:187px; height:224px}
</style>
<script type="text/javascript">
var maximized = false;
//function to maximize the image.
function maximizeFn()
{
document.getElementById("w1").style.position="absolute";
document.getElementById("w1").style.zIndex="2";
document.getElementById("w1").style.width="374";
document.getElementById("w1").style.height="448";
document.getElementById("w1").style.title="Click to Restore";
maximized = true;
}
//function to restore the image.
function restoreFn()
{
document.getElementById("w1").style.position="relative";
document.getElementById("w1").style.zIndex="1";
document.getElementById("w1").style.width="187";
document.getElementById("w1").style.height="224";
document.getElementById("w1").style.title="Click to Maximize";
maximized = false;
}
//function to call either the maximizeFn() or restoreFn()
function maxRest()
{
if (maximized == true)
restoreFn();
else
maximizeFn();
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2" align="center">
<h1>Maximizing and Restoring HTML Image - Layer Method</h1>
</td>
</tr>
<tr>
<td width="100">
</td>
<td width="187" height="224" valign="top">
<img id="w1" src="watch.jpg" class="watch" onclick="maxRest()" title="Click to Maximize" />
</td>
</tr>
<tr>
<td>
</td>
<td><b>Quality Watch</b> (click to maximize)
</td>
</tr>
</tbody>
</table>
</body>
</html>
Explanation of code
An HTML table is used for the layout of the web page. The image element is in a Table Cell. The image has the id, src, class, onclick and title attributes.
For the CSS the body element is given the z-index value of 0. The image is given only the width and height values.
Concerning the JavaScript, when the image is maximized, it is given the absolute position property and a higher z-index value. With this it appears bigger, covering any element it has to cover. There is the global variable “maximized,” which indicates whether the image is maximized or minimized. If the variable is “false,” the function “maximizeFn()” is called. If the value is “true” the function “restoreFn()” is called. The names of the functions and the lines in them are self-explanatory; as you read the lines, bear in mind all that I have said above.
Next: Other Image Types >>
More HTML Articles
More By Chrysanthus Forcha
