Maximizing and Restoring HTML Images: Layer Method
(Page 1 of 4 )
If you're writing web pages for an e-commerce web site, you might want to give visitors the ability to enlarge thumbnail images of your products so they can see more detail. You can buy a program that will do this for you -- or you can save your money and read this article to learn how to do it yourself, with a little HTML, JavaScript, and CSS.
The phenomenon
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. While the image is maximized, there is still a small clickable area on the image which, if you click it, the image is restored to its former size. This phenomenon is common in e-commerce or shopping web sites.
I have a special method to achieve this, involving no clickable area on the image. You click the image and it maximizes itself, covering any element (text) it has to cover at its maximum size. When you click the maximized image, it restores itself.
One way to do this on your web page is to obtain (buy) a program, which will produce the image with the effects. When the image is clicked, it would maximize or restore itself -- you do not need to know how the program was written, you just use it to produce an image that can be maximized and restored. Another way is to do it yourself, using JavaScript and CSS. I want to show you a special method to achieve this using HTML, JavaScript and CSS. I do not know if anybody has done this before, so I refer to it as my Special Method.
At the moment I am writing an article series on the topic of database forms with HTML. In one part of that series, I explained how to maximize and restore images that are in an HTML tabular form. The method in this article is one of the methods I used; it is my favorite, in fact. Note that in that part of the series I only used the principles established here, and did not explain the details. There I only explained how the principles I will illustrate here fit with HTML tabular forms.
You need to know the basics of HTML, JavaScript and CSS in order to understand this method. I will use the image of a watch to explain it. Two sizes of a watch are given below (Fig.1 & Fig.2). The first figure shows the web page when the watch is at its normal size (restored) and the second figure shows the situation when the watch is at its maximized size.
Fig.1 Normal Size
Fig.2 Maximized Size
Next: The Method >>
More HTML Articles
More By Chrysanthus Forcha
