Maximizing and Restoring HTML Images with the Absolute Method - Testing and Finalizing
(Page 4 of 4 )
If you have typed everything correctly, your code should be as follows:
<html>
<head>
<style type="text/css">
body {margin:0px}
img.watch {position:relative; width:187px; height:224px; left:0px; top:0px; z-index:1}
img.maximize {position:absolute; left:256px; top:193px; z-index:2}
img.restore {position:absolute; left:256px; top:193px; visibility:hidden; z-index:2}
</style>
<script type="text/javascript">
//function to maximize the image.
function maximizeFn()
{
document.getElementById("w1").style.width="374";
document.getElementById("w1").style.height="448";
document.getElementById("m1").style.visibility="hidden";
document.getElementById("r1").style.visibility="visible";
document.getElementById("r1").style.left="443";
document.getElementById("r1").style.top="417";
}
//function to restore the image.
function restoreFn()
{
document.getElementById("w1").style.width="187";
document.getElementById("w1").style.height="224";
document.getElementById("m1").style.visibility="visible";
document.getElementById("r1").style.visibility="hidden";
document.getElementById("r1").style.left="256";
document.getElementById("r1").style.top="193";
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="100">
</td>
<td>
<img id="w1" src="watch.jpg" class="watch" />
<img id="m1" src="maximize.jpg" class="maximize" onclick="maximizeFn()" title="Maximize" />
<img id="r1" src="restore.jpg" class="restore" onclick="restoreFn()" title="Restore" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Save the HTML file and open it in your browser. Click the maximization area. Your main image should be maximized. The maximization area should disappear and you should see the restoration area at the bottom right of the enlarged main image.
Click on the restoration area and the main image will be restored with the maximization image at its correct position.
Wouldn't it be nice to have a tool tip display the text “Maximize” when the mouse pointer is over the clickable maximization area, and to display the text “Restore” when it is over the clickable restoration area? You use the “title” attribute to do this. So modify the small image tags to display the following:
<img id="m1" src="maximize.jpg" class="maximize" onclick="maximizeFn()" title="Maximize" />
<img id="r1" src="restore.jpg" class="restore" onclick="restoreFn()" title="Restore" />
Save your HTML file and open it with a browser. Test the phenomenon in any way you want and notice that when the mouse pointer is over a clickable area, the tool tip indicates the purpose by showing the relevant text.
Caution
When you use absolute positioning, you have to be careful when you add large elements or large quantities of text in other areas (cells) of the page (table). In the present situation, if you add a lot of text in the first cell of our one row table, the main image will move downwards, everything being equal (since the width of the first cell is fixed at 100px). However, the small maximization image will not move downwards. This is because it has been given an absolute position. This means that while you are designing your web page, you should be tracking the positions of your elements that have the absolute position property; that is, you should be verifying whether the elements having the absolute position property are still in the positions you want them to be in.
Other Image Types
I have insisted on JPEG images just to avoid unnecessary debugging problems. So the code that I have given in this article must work, if you try it. You can use any type of image accepted by browsers in your other projects.
Image Resolution
You might have noticed in the past that when you increase the size (dimensions) of an image from the original size taken from the scanner, its resolution (fineness) is lost. However, when you reduce the size (dimensions) of an image, its resolution is not lost.
The solution is this: let the original size taken from your scanner (or digital camera) be the largest size that you can have on your web page. Let this be the size that will be downloaded onto your web page. What we call the normal size of the main image above will simply be a result of the values we give the image in the style sheet properties. The maximized size should not be greater than the actual size obtained from the scanner.
Conclusion
If you are developing web pages for e-commerce, shopping, or some other purpose, you can write code to increase or decrease the size of images. You do not need to know how to develop a particular type of image (eg. JPEG). The code you write is not long. You use JavaScript and CSS to do this. With this little effort, you save the money you would have spent to buy a program that does the same thing.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
