HTML

Maximizing and Restoring HTML Images with the Image Map Method

This article is a follow up to the article "Maximizing and Restoring HTML Images with the Absolute Method." It offers an alternative method, which I call "Image Map." So if you want another way to display an image on your web page with maximization and restoration capabilities, then by all means read this article.

Author Info:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 1

April 16, 2008

TABLE OF CONTENTS:

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.