Currently, I have two tables set up. One table is filled with various images while the other table remains empty. My goal is to allow users to click on an image in the first table and have that specific image transferred over to the second table where it will be displayed at a larger size.
Here is how the structure of my tables appears:
<div>
<table id="enlarged" width="530px" border="1">
<tr>
<th>Enlarged Picture.</th>
</tr>
<tr>
<td>
<div id="div1"> </div>
</td>
</tr>
</div>
<br/>
<div>
<table id="small" width="530px" border="1">
<tr>
<th>Click on picture to see it enlarged.</th>
</tr>
<tr>
<td>
<img id="picture1" src="winter.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
<img id="picture2" src="winter1.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
<img id="picture3" src="winter2.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
<img id="picture4" src="winter3.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
<img id="picture5" src="winter4.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
</td>
</tr>
</table>
</div>
In attempting this functionality, I created a JavaScript function like so:
function addPictureToTable(){
var myPicture = document.getElementById("picture1");
var table = document.getElementById("enlarged");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= myPicture;
}
If needed, the images moved from the initial table can also be placed into a simple div rather than a separate table.