Welcome to the second part of a two-part series that explains how to set up a three-dimensional HTML image gallery using Active Client Pages (ACP). In this part of the series, among other things, we'll get a close look at the JavaScript that helps to keep things running smoothly.
Completing an ACP 3D HTML Table Image Gallery - The Content of the DIV Element (Page 2 of 4 )
This DIV element has the tags for the rest of the images, and also has the JavaScript code to copy the images into the table cells of the second and third plane. If you omit the JavaScript (which you should not), then this is what you would have in the DIV element:
<div style="display:none">
<img src="i001.gif" id="I001" onclick="maxRest('I001')" title="Click to Maximize">
<img src="i011.gif" id="I011" onclick="maxRest('I011')" title="Click to Maximize">
<img src="i021.gif" id="I021" onclick="maxRest('I021')" title="Click to Maximize">
<img src="i101.gif" id="I101" onclick="maxRest('I101')" title="Click to Maximize">
<img src="i111.gif" id="I111" onclick="maxRest('I111')" title="Click to Maximize">
<img src="i121.gif" id="I121" onclick="maxRest('I121')" title="Click to Maximize">
<img src="i201.gif" id="I201" onclick="maxRest('I201')" title="Click to Maximize">
<img src="i211.gif" id="I211" onclick="maxRest('I211')" title="Click to Maximize">
<img src="i221.gif" id="I221" onclick="maxRest('I221')" title="Click to Maximize">
<img src="i002.gif" id="I002" onclick="maxRest('I002')" title="Click to Maximize">
<img src="i012.gif" id="I012" onclick="maxRest('I012')" title="Click to Maximize">
<img src="i022.gif" id="I022" onclick="maxRest('I022')" title="Click to Maximize">
<img src="i102.gif" id="I102" onclick="maxRest('I102')" title="Click to Maximize">
<img src="i112.gif" id="I112" onclick="maxRest('I112')" title="Click to Maximize">
<img src="i122.gif" id="I122" onclick="maxRest('I122')" title="Click to Maximize">
<img src="i202.gif" id="I202" onclick="maxRest('I202')" title="Click to Maximize">
<img src="i212.gif" id="I212" onclick="maxRest('I212')" title="Click to Maximize">
<img src="i222.gif" id="I222" onclick="maxRest('I222')" title="Click to Maximize">
</div>
The first code segment in the DIV element has the nine image tags for the second plane in the 3D table. The second code segment has the other nine image tags for the third plane. Remember, the value of the CSS display property for the DIV element is “none.” So the DIV element is not seen and it does not occupy space.
Automatically, the image tags inside are not seen. These image tags sit in exactly the same way that they would appear in the cells of the planes. Remember that the image tags for the cells of the first plane are downloaded with the 3D table. If the line were slow, then this first set of images might take a while to download and appear on the screen. After this, the rest (next set) of the images will appear on the screen as soon as the user clicks the button.
After the first set of tags in the DIV element, you have the script that copies the first set of image tags to the second plane. Do not confuse the first set of image tags in the DIV element with the first set of images tags in the first plane. The first set of image tags in the DIV element is for the cells in the second plane. These images in the DIV element are downloaded while the user is seeing the first set of images in the first plane.