Maximizing and Restoring HTML Images with the Absolute Method - Accomplishing it with JavaScript and CSS
(Page 2 of 4 )
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 and a text editor (notepad).
The outline of the HTML code is:
<html>
<head>
</head>
<body>
</body>
</html>
So type the above code in 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), 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.
As indicated above, the clickable area on the main image is actually a small rectangular image that has been placed on this main image of interest. You can create the small rectangular image using any simple drawing tool such as Microsoft Paint version 5.2.
Create two small images of size 31 X 31 pixels; one with a black square border for maximizing and the other with two overlapped black squares for restoring (as indicated in the above figures). Give the one with the square border the name maximize.jpg. Give the one with the overlapped squares the name restore.jpg. The two small images you have created and the one you got from your gallery should be of the same type (JPEG). To avoid the unnecessary problems of debugging (compatibility with my code), do not use your own sizes, image name, or image type. Save the two rectangular pictures in the directory you chose above.
You now have three images: one is the image of interest, whose size will be maximized and restored; another has a square border and is of size 31 X 31 pixels; the last one has an overlapped square and is of size 31 X 31 pixels. The 31 X 31 pixel images will be made clickable (explained below). The main image of interest does not have to be made clickable and will not be made clickable in this project.
We need to have these three pictures in your web page. We shall use JavaScript and CSS to superimpose the clickable images onto the main image.
Now, add the following code to the content of the body element of your HTML file, max_rest.htm:
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="100">
</td>
<td>
<img id="w1" src="watch.jpg" />
<img id="m1" src="maximize.jpg" />
<img id="r1" src="restore.jpg" />
</td>
</tr>
</tbody>
</table>
Web pages generally use the Table element for their layout. That is why I have used the Table element here to contain the image. The absolute position of any element on a web page is measured with respect to the top-left corner of the web page (client area). With this method, you have to know the absolute position of the images. To make the calculations within the table simple, I have given the cell padding a value of 0 and the cell spacing a value of 0. The main image has been placed in the second cell of the one row table. In a normal web page, you will have many rows with many cells.
The images have been given IDs. We shall see how this is used soon. Now open the file max_rest.htm with your browser. You should see the main image, the small maximization image, and the small restoration image on the same horizontal line side by side. I want you to take note that these are the normal positions of the images according to the order given in the body element.
You can use CSS to give the initial size of any image. You do this by setting the values of the dimension properties, width and height. You can place an image anywhere in the web page by giving it the required absolute position. This can also be done in CSS. Type the following style sheet in the head element of the HTML file.
<style type="text/css">
body {margin:0px}
img.watch {position:relative; width:187px; height:224px; left:0px; top:0px}
img.maximize {position:absolute; left:256px; top:193px}
img.restore {position:absolute; left:256px; top:193px}
</style>
Next: Accomplishing it with JavaScript and CSS continued >>
More HTML Articles
More By Chrysanthus Forcha
