Home arrow HTML arrow Maximizing and Restoring HTML Images: Layer Method

Maximizing and Restoring HTML Images: Layer Method

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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 13
November 04, 2008
  1. · Maximizing and Restoring HTML Images: Layer Method
  2. · The Method
  3. · Operation
  4. · Other Image Types

print this article

Maximizing and Restoring HTML Images: Layer Method
(Page 1 of 4 )

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

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials