Maximizing and Restoring HTML Images with the Absolute Method
Maximizing and Restoring HTML Images with the Absolute Method (Page 1 of 4 )
You must have come across web pages with images that can be enlarged (maximized) and restored within the same page. There is normally a small clickable area on the image. When you click this area, the image is maximized. When the image is maximized, there is a small clickable area on the image that restores the image to its original size if clicked. This phenomenon is common in e-commerce or shopping web sites.
The small square with a black border at the bottom right of the normal sized image is the clickable area that allows you to maximize the image. The small overlapped squares at the bottom right of the maximized image let you restore the image to the smaller size.
The method (Absolute Method)
This is how the whole method works: there is the main image of interest, like the image of a watch, that will be maximized. There is a small image with the maximization symbol (square) and this image is made clickable (explained below). There is another small image with the restoration symbol (overlapped squares) and it is also made clickable. So there are three images. The restored and maximized sizes of the main image of interest are controlled via CSS (see below).