HTML

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

Poor Best

Rating:

/ 3

November 04, 2008

TABLE OF CONTENTS:

· Maximizing and Restoring HTML Images: Layer Method
· The Method
· Operation
· Other Image Types

The title attribute of an HTML element is used to produce a tool tip when the mouse pointer is over the element. Our image is given a title attribute, which says, “Click to maximize.” When the image is clicked it is maximized; the tool tip is changed to “Click to Restore.” When you click the maximized image, it is restored; the too tip says “Click to maximize” again.

Unfortunately the tool tip may not show long enough for the user’s satisfaction. So to make sure that the user knows that he can click the image to maximize, on the web page, I have written just below the image, “Quality Watch (Click to maximize).”

Accomplishing it with JavaScript and CSS

I will give you the code before I explain how it works. There is one associated image file with the code. After going through this article, you can try the code.

<html>

<head>

body {z-index:0}

img.watch {width:187px; height:224px}

</style>

var maximized = false;

//function to maximize the image.

function maximizeFn()

{

document.getElementById("w1").style.position="absolute";

document.getElementById("w1").style.zIndex="2";

document.getElementById("w1").style.width="374";

document.getElementById("w1").style.height="448";

document.getElementById("w1").style.title="Click to Restore";

maximized = true;

}

//function to restore the image.

function restoreFn()

{

document.getElementById("w1").style.position="relative";

document.getElementById("w1").style.zIndex="1";

document.getElementById("w1").style.width="187";

document.getElementById("w1").style.height="224";

document.getElementById("w1").style.title="Click to Maximize";

maximized = false;

}

//function to call either the maximizeFn() or restoreFn()

function maxRest()

{

if (maximized == true)

restoreFn();

else

maximizeFn();

}

</script>

</head>

<body>

<tbody>

<tr>

<h1>Maximizing and Restoring HTML Image - Layer Method</h1>

</td>

</tr>

<tr>

</td>

</td>

</tr>

<tr>

<td> 

</td>

<td><b>Quality Watch</b> (click to maximize)

</td>

</tr>

</tbody>

</table>

</body>

</html>

Explanation of code

An HTML table is used for the layout of the web page. The image element is in a Table Cell. The image has the id, src, class, onclick and title attributes.

For the CSS the body element is given the z-index value of 0. The image is given only the width and height values.

Concerning the JavaScript, when the image is maximized, it is given the absolute position property and a higher z-index value. With this it appears bigger, covering any element it has to cover. There is the global variable “maximized,” which indicates whether the image is maximized or minimized. If the variable is “false,” the function “maximizeFn()” is called. If the value is “true” the function “restoreFn()” is called. The names of the functions and the lines in them are self-explanatory; as you read the lines, bear in mind all that I have said above.

Next: Other Image Types >>