Handling Images in a 3D Table Image Gallery

You might have noticed in the past that when you increase the size (dimensions) of an image from the original size taken from the scanner, its resolution (fineness) is lost. However, when you reduce the size (dimensions) of an image, its resolution is not lost.

The solution is this: let the original size taken from your scanner (or digital camera) be the largest size that you can have on your web page. Let this be the size that will be downloaded onto you web page. What we call the small size of the main image above will simply be a result of the values we force for the image in the style sheet properties. The maximized size should not be greater than the actual size obtained from the scanner.

The Style Sheet

This is the style sheet for our example:

<style type="text/css">

body {z-index:0}

img {width:100px; height:100px}

</style>

The body element is given a z-index value of zero. A maximized image is given a z-index value of 2. The rest of the elements are assumed to have a z-index value of 1.