Maximizing and Restoring HTML Images with the Image Map Method - Testing and Finalizing
(Page 4 of 4 )
If you have typed everything correctly, you should have the following code for your max_rest.htm file:
<html>
<head>
<style type="text/css">
img.watch {width:187px; height:224px; border: 0px none #000000}
</style>
<script type="text/javascript">
var restored = true;
//function to decide whether to maximize or restore
function maximizeRestore()
{
if (restored == true)
{//block to maximize the image.
document.getElementById("w1").style.width="374";
document.getElementById("w1").style.height="448";
document.getElementById("a1").coords="342,416,374,448";
document.getElementById("a1").title="Restore";
restored = false;
}
else
{//block to restore the image.
document.getElementById("w1").style.width="187";
document.getElementById("w1").style.height="224";
document.getElementById("a1").coords="171,208,187,224";
document.getElementById("a1").title="Maximize";
restored = true;
}
}
</script>
</head>
<body>
<img id="w1" src="watch.jpg" usemap ="#clickMaxRest" class="watch" />
<map id ="clickMaxRest" name="clickMaxRest">
<area id = "a1" shape ="rect" coords ="171,208,187,224" onclick="maximizeRestore()" title="Maximize" />
</map>
</body>
</html>
Now save the file in the directory. Open it in your browser to test the work. The image should be at its normal size. Place your mouse pointer over the triangle; the word "Maximize" should appear. Click the triangle; the image should be maximized. Place your mouse pointer over the triangle of the maximized image; the word "Restored" should appear. Click the triangle; the image should be restored.
Other Image Types
I have insisted on a JPEG image just to avoid unnecessary debugging problems. It is so that the code I have given in this article works. 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 dimensions of an image from the original size taken from the scanner, its resolution (fineness) is lost. However, when you reduce the size 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 force for 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 money.
| 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. |
