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.
Maximizing and Restoring HTML Images with the Image Map Method - The Method (Page 2 of 4 )
This is how the whole method works: an HTML image with a clickable areas is called an image-map. Our image of interest here, in the maximized or restored form, is an image-map. The triangle at the bottom right is the only clickable area.
When you click the triangle, while the picture is at its normal size, a JavaScript function is called. A code block in this function uses a CSS property to increase the dimensions of the image. I explain how to avoid resolution loss below. If you click the triangle while the image is at its maximized form, the same function will be called. However, this time, another code block will use CSS to decrease the dimensions of the image. The maximized and restored sizes of our image of interest are controlled by CSS (see below).
Accomplishing it with JavaScript and CSS
I used Microsoft Internet Explorer version 6 to carry out this project. I give you all the code and I tell you what I did in this simple project. I advise you to do the project yourself in order to fully understand the method. All you need is your favorite browser, a simple drawing tool (e.g. Microsoft Paint version 5.2), and a text editor (notepad).
The outline of the HTML code is:
<html>
<head>
</head>
<body>
</body>
</html>
So type the above code into your text editor and save it with the name "max_rest.htm" in any directory (folder) of your choice.
Get the image of a watch or any object of your choice from your picture gallery (clip art). The picture should be about 374 X 448 pixels. Give it the name watch.jpg (convert the type if necessary) and save it in the directory (above). The picture should be of type JPEG, which can be displayed by a browser. We shall make the image 187 X 224 pixels for its normal size and 374 X 448 pixels for its maximized size (see below).
Open the image with your drawing tool. Carefully estimate or determine an area of 32 X32 pixels at the bottom right of the image; this area should be the last region at the bottom right end of the image. With your drawing tool, draw a triangle within this area of 32 X 32 pixels. To avoid unnecessary problems of debugging (compatibility with my code), do not use your own sizes, image name, or image type. For simplicity, we shall make this area, which includes the triangle, clickable, instead of making the triangle clickable. The triangle is there to indicate the region that will be clicked. Save the image in the directory.
As mentioned above, the area of 32 X 32 pixels is the area we shall make clickable. We shall force the normal size of the image to be 187 X 224 pixels. We shall also force the maximized size of the image to be 374 X 448 pixels, which is twice the normal size. Again to avoid unnecessary problems with debugging, do not chose your own sizes.
Now add the following code for the image to the content of the body element of your HTML file, max_rest.htm:
<img id="w1" src="watch.jpg" />
The image has been given an ID. We shall see the use of this soon. Type the following style sheet in the head element of the HTML file.
The class name, "watch," in this style sheet is to give the image a width of 187px and a height of 224px for its normal size. There will be no border, so I have given a border size of 0px (no other border value will have any effects). Now add this class name to the code in the HTML body element, so that its content looks as follows:
<body>
<img id="w1" src="watch.jpg" class="watch" />
</body>
Save the file max_rest.htm and then open it with your browser. The area we want to make clickable now has the size of approximately 16 X 16 pixels and not approximately 32 X 32 pixels, since we have forced the normal size of the picture to be about half the original size (from the scanner). Even though everything is now approximately half, the area we want to make clickable is still at the bottom right end of the image. So when your visitor opens your web page for the first time, this is the size of the picture he would see.
HTML 
Maximizing and Restoring HTML Images: Layer Method
