Building an Image Gallery in a 3D HTML Table

This is the table code. Go through it and note that each TD element has an image tag. The src attribute of the tag provides the image from the server. Each image tag has an ID of an onclick event. When an image is clicked, the function to maximize or restore it is called by this event. Also note the IDs of each one-row table. These IDs are very important for the JavaScript.

<table id="T1" cellpadding="0">

<tr id="R0">

<td id="TD00">

<table id="T00" cellpadding="0">

<tr id="TR00">

<td id="TD000" valign="top" style="display:block" width="100" height="100"><img src="i000.gif" id="I000" onclick="maxRest('I000')" title="Click to Maximize">

</td>

<td id="TD001" valign="top" style="display:none" width="100" height="100"><img src="i001.gif" id="I001" onclick="maxRest('I001')" title="Click to Maximize">

</td>

<td id="TD002" valign="top" style="display:none" width="100" height="100"><img src="i002.gif" id="I002" onclick="maxRest('I002')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

<td id="TD01">

<table id="T01" cellpadding="0">

<tr id="TR01">

<td id="TD010" valign="top" style="display:block" width="100" height="100"><img src="i010.gif" id="I010" onclick="maxRest('I010')" title="Click to Maximize">

</td>

<td id="TD011" valign="top" style="display:none" width="100" height="100"><img src="i011.gif" id="I011" onclick="maxRest('I011')" title="Click to Maximize">

</td>

<td id="TD012" valign="top" style="display:none" width="100" height="100"><img src="i012.gif" id="I012" onclick="maxRest('I012')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

<td id="TD02">

<table id="T02" cellpadding="0">

<tr id="TR02">

<td id="TD020" valign="top" style="display:block" width="100" height="100"><img src="i020.gif" id="I020" onclick="maxRest('I020')" title="Click to Maximize">

</td>

<td id="TD021" valign="top" style="display:none" width="100" height="100"><img src="i021.gif" id="I021" onclick="maxRest('I021')" title="Click to Maximize">

</td>

<td id="TD022" valign="top" style="display:none" width="100" height="100"><img src="i022.gif" id="I022" onclick="maxRest('I022')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

</tr>

<tr id="R1">

<td id="TD10">

<table id="T10" cellpadding="0">

<tr id="TR10">

<td id="TD100" valign="top" style="display:block" width="100" height="100"><img src="i100.gif" id="I100" onclick="maxRest('I100')" title="Click to Maximize">

</td>

<td id="TD101" valign="top" style="display:none" width="100" height="100"><img src="i101.gif" id="I101" onclick="maxRest('I101')" title="Click to Maximize">

</td>

<td id="TD102" valign="top" style="display:none" width="100" height="100"><img src="i102.gif" id="I102" onclick="maxRest('I102')" title="Click to Maximize">

</tr>

</table>

</td>

<td id="TD11">

<table id="T11" cellpadding="0">

<tr id="TR11">

<td id="TD110" valign="top" style="display:block" width="100" height="100"><img src="i110.gif" id="I110" onclick="maxRest('I110')" title="Click to Maximize">

</td>

<td id="TD111" valign="top" style="display:none" width="100" height="100"><img src="i111.gif" id="I111" onclick="maxRest('I111')" title="Click to Maximize">

</td>

<td id="TD112" valign="top" style="display:none" width="100" height="100"><img src="i112.gif" id="I112" onclick="maxRest('I112')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

<td id="TD12">

<table id="T12" cellpadding="0">

<tr id="TR12">

<td id="TD120" valign="top" style="display:block" width="100" height="100"><img src="i120.gif" id="I120" onclick="maxRest('I120')" title="Click to Maximize">

</td>

<td id="TD121" valign="top" style="display:none" width="100" height="100"><img src="i121.gif" id="I121" onclick="maxRest('I121')" title="Click to Maximize">

</td>

<td id="TD122" valign="top" style="display:none" width="100" height="100"><img src="i122.gif" id="I122" onclick="maxRest('I122')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

</tr>

<tr id="R2">

<td id="TD20">

<table id="T20" cellpadding="0">

<tr id="TR20">

<td id="TD200" valign="top" style="display:block" width="100" height="100"><img src="i200.gif" id="I200" onclick="maxRest('I200')" title="Click to Maximize">

</td>

<td id="TD201" valign="top" style="display:none" width="100" height="100"><img src="i201.gif" id="I201" onclick="maxRest('I201')" title="Click to Maximize">

</td>

<td id="TD202" valign="top" style="display:none" width="100" height="100"><img src="i202.gif" id="I202" onclick="maxRest('I202')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

<td id="TD21">

<table id="T21" cellpadding="0">

<tr id="TR21">

<td id="TD210" valign="top" style="display:block" width="100" height="100"><img src="i210.gif" id="I210" onclick="maxRest('I210')" title="Click to Maximize">

</td>

<td id="TD211" valign="top" style="display:none" width="100" height="100"><img src="i211.gif" id="I211" onclick="maxRest('I211')" title="Click to Maximize">

</td>

<td id="TD212" valign="top" style="display:none" width="100" height="100"><img src="i212.gif" id="I212" onclick="maxRest('I212')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

<td id="TD22">

<table id="T22" cellpadding="0">

<tr id="TR22">

<td id="TD220" valign="top" style="display:block" width="100" height="100"><img src="i220.gif" id="I220" onclick="maxRest('I220')" title="Click to Maximize">

</td>

<td id="TD221" valign="top" style="display:none" width="100" height="100"><img src="i221.gif" id="I221" onclick="maxRest('I221')" title="Click to Maximize">

</td>

<td id="TD222" valign="top" style="display:none" width="100" height="100"><img src="i222.gif" id="I222" onclick="maxRest('I222')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

</tr>

</table>