Handling Images in a 3D Table Image Gallery

The maximizeFn(ID) function

This is the “maximizeFn(ID)” function:

function maximizeFn(ID)

{

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

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

document.getElementById(ID).style.width="400";

document.getElementById(ID).style.height="400";

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

maximized = true;

}

In our example, the restored image size is 100px X 100px, while the maximized image size is 400px X 400px.

When the maximizeFn(ID) function is called, it gives the image the CSS absolute position property. Next, it gives the image a CSS z-index value of 2. Then it gives the new width, and then the new height of the image. These are the dimensions when maximized (400px X 400px).

After it does this, it changes the title attribute of the image to (Click to Restore). While the image is maximized, if your mouse pointer goes over it, a tool tip should indicate “Click to Restore.” When the image is maximized, it can only be restored. So the function sets the maximized variable to true. When next the maxRest(ID) is called, it will use the maximized value of true to call the “restoreFn(ID)” function.

The restoreFn(ID) function

This is the “restoreFn(ID) function:

function restoreFn(ID)

{

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

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

document.getElementById(ID).style.width="100";

document.getElementById(ID).style.height="100";

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

maximized = false;

}

When the restoreFn(ID)function is called, it gives the image the CSS relative position property. Next it gives the image a CSS z-index value of 1. After that, it gives the old width and then the old height of the image. These are the dimensions when restored (100px X 100px). It then changes the title attribute of the image to (Click to Maximize). While the image is restored, if your mouse pointer goes over it a tool tip should indicate “Click to Maximize.” When the image is restored, it can only be maximized. So the function sets the maximized variable to false. When the maxRest(ID) is next called, it will use the maximized value of false to call the “maximizeFn(ID)” function.

All of the functions use the ID of the image in their execution.