Maximizing and Restoring Images in a Tabular Database Form in HTML
(Page 1 of 4 )
Welcome to the twelfth part of a thirteen-part series that shows you how to build database forms with HTML. In the previous part, we dealt with the recordset and began getting everything together for our database. In this part, since we know our shopper may want to see our watch images in different sizes, we will learn how to maximize and restore images.
We now have images as data in the tabular form. Each image seen is the background of the File Input control. The value of this control is the path (link) to the actual image. In order for these images to fit vertically in the tabular form, they have to be small. The user will want to maximize the image to appreciate it properly. After maximizing, he will want to either restore or remove the maximized image.
I will show you two ways of doing this. I have enclosed 10 images that you can use to experiment with my code or your own code. They will help you gain experience quickly but they are not really part of this document. If you do not want to experiment with the code, then you do not need the images.
The first way to maximize and restore images is my favorite. With this method, when you click an image, it is maximized. The maximized image covers the elements (text) behind it. When you click the maximized image it disappears; the small image remains.
The second method is one you might have experienced. Here, when you click an image, a new window appears with the image maximized; to remove the image from the screen you close the new window.
The First Method of Maximizing an Image
I recently wrote an article about the first method. I will use the principles here without explaining the details. The principles are as follows:
The maximized image is the largest image at its original resolution.
This image (to be maximized) is given the CSS “position:absolute” property.
This image (to be maximized) should not be given the CSS Left and Right properties.
This 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.
If you read that article, you would recall that browsers today do not handle the CSS position and associated properties as they should. Also, because of the complexity of our project, I will not follow the above steps strictly. Click on the link below and keep reading to see what I have done.
Next: Image Tags >>
More HTML Articles
More By Chrysanthus Forcha
