Home arrow HTML arrow Maximizing and Restoring Images in a Tabular Database Form in HTML
HTML

Maximizing and Restoring Images in a Tabular Database Form in HTML


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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
October 01, 2008
TABLE OF CONTENTS:
  1. · Maximizing and Restoring Images in a Tabular Database Form in HTML
  2. · Image Tags
  3. · Second Method of Maximizing and Restoring
  4. · Final Comments on the Client Side Design

print this article
SEARCH DEVARTICLES

Maximizing and Restoring Images in a Tabular Database Form in HTML
(Page 1 of 4 )

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:

  1. The maximized image is the largest image at its original resolution.

  2. This image (to be maximized) is given the CSS “position:absolute” property.

  3. This image (to be maximized) should not be given the CSS Left and Right properties.

  4. This image (to be maximized) is given a z-index that is higher than those of its surrounding elements.

  5. The dimensions of the image are increased to maximize it.

  6. The vertical align property of the parent element, preferably the TD element should be given a value of “top.”

  7. 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.


blog comments powered by Disqus
HTML ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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