Maximizing and Restoring HTML Images: Layer Method

I have used a JPEG image just to avoid an unnecessary debugging problem; this is to ensure that the code I have given in this article will 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 you 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.

Side Effect

When the image is maximized, its position may change a bit (vertically downwards). This is a side effect, but it is not very bad, since the maximized image will cover elements anyway. Also, the user clicks the image when he wants to maximize the image. When the image is maximized, he concentrates on the image. The slight change in position is therefore not too important.

However, there is a possible solution for this.

Solution to Side-Effect

Browsers today do not handle the CSS “position:absolute” property as they should. So any solution you can get is based on experience with different browsers. Our maximized image is in a Table Cell. Giving the Table Cell the attribute and value ‘valign="top"’ would solve the problem.

Testing

Copy the code into a text editor. Save the file with the name “max_rest.htm” in a directory. Save the image file in the same directory. Open the HTML file in your browser. Click the image; it maximizes, covering anything (text) it has to cover in order to maximize. Click the maximized image, and the image should be restored.

Summary:

• The image to be maximized is given the CSS “position:absolute” property.

• The image to be maximized should not be given the CSS Left and Right properties.

• The image to be maximized is given a z-index that is higher than those of its surrounding elements.

• The dimensions of the image are increased to maximize it.

• The vertical align property of the parent element, preferably the TD element, should be given a value of “top.”

• To restore, reverse the third and fourth points above. You may also give the image the CSS “position:relative” property.

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.