Completing an ACP 3D HTML Table Image Gallery

This is the script that copies the first set of image tags from the DIV into the cells of the second plane of the 3D table:

<script type="text/javascript">

document.getElementById('TD001').innerHTML = "<img src="i001.gif" id="I001" onclick="maxRest('I001')" title="Click to Maximize">";

document.getElementById('TD011').innerHTML = "<img src="i011.gif" id="I011" onclick="maxRest('I011')" title="Click to Maximize">";

document.getElementById('TD021').innerHTML = "<img src="i021.gif" id="I021" onclick="maxRest('I021')" title="Click to Maximize">";

document.getElementById('TD101').innerHTML = "<img src="i101.gif" id="I101" onclick="maxRest('I101')" title="Click to Maximize">";

document.getElementById('TD111').innerHTML = "<img src="i111.gif" id="I111" onclick="maxRest('I111')" title="Click to Maximize">";

document.getElementById('TD121').innerHTML = "<img src="i121.gif" id="I121" onclick="maxRest('I121')" title="Click to Maximize">";

document.getElementById('TD201').innerHTML = "<img src="i201.gif" id="I201" onclick="maxRest('I201')" title="Click to Maximize">";

document.getElementById('TD211').innerHTML = "<img src="i211.gif" id="I211" onclick="maxRest('I211')" title="Click to Maximize">";

document.getElementById('TD221').innerHTML = "<img src="i221.gif" id="I221" onclick="maxRest('I221')" title="Click to Maximize">";

</script>

Normally for a large image gallery, you should have for-loops to do this copy. For simplicity I have used one statement per image. Note the use of the DOM innerHTML property. This script is included immediately after the first set of image tags in the DIV element.

The second set of image tags has its own script immediately after it. This script copies the second set of image tags in the DIV element into the third plane. This is the script:

<script type="text/javascript">

document.getElementById('TD002').innerHTML = "<img src="i002.gif" id="I002" onclick="maxRest('I002')" title="Click to Maximize">";

document.getElementById('TD012').innerHTML = "<img src="i012.gif" id="I012" onclick="maxRest('I012')" title="Click to Maximize">";

document.getElementById('TD022').innerHTML = "<img src="i022.gif" id="I022" onclick="maxRest('I022')" title="Click to Maximize">";

document.getElementById('TD102').innerHTML = "<img src="i102.gif" id="I102" onclick="maxRest('I102')" title="Click to Maximize">";

document.getElementById('TD112').innerHTML = "<img src="i112.gif" id="I112" onclick="maxRest('I112')" title="Click to Maximize">";

document.getElementById('TD122').innerHTML = "<img src="i122.gif" id="I122" onclick="maxRest('I122')" title="Click to Maximize">";

document.getElementById('TD202').innerHTML = "<img src="i202.gif" id="I202" onclick="maxRest('I202')" title="Click to Maximize">";

document.getElementById('TD212').innerHTML = "<img src="i212.gif" id="I212" onclick="maxRest('I212')" title="Click to Maximize">";

document.getElementById('TD222').innerHTML = "<img src="i222.gif" id="I222" onclick="maxRest('I222')" title="Click to Maximize">";

</script>

The explanation of this script is the same as for the former script. Now, each set of image tags in the DIV element is followed by its script. In this way, as soon as the set of images is downloaded, the images are copied to their plane, ready for display.