Dynamic Image Selector script question

[kalew]

Dynamic Image Selector

http://www.dynamicdrive.com/dynamicindex4/imageselector.htm

I would like to have the Selector Box within a <div> on the right side of my page and the image that changes on the left. Can someone please tell me what part of this script I need to move in order to accomplish this?

Currently, I moved this part to the <div>. Am I correct?

<form name="dynamicselector">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="250">
<tr>
<td width="35%" valign="top" align="left">
<select name="dynamicselector2" size="4" onChange="generateimage(this.options[this.selectedIndex].value)">

<option value="http://image1.jpg" selected>Exterior</option>
<option value="http://image2.jpg">Master Bedroom</option>
<option value="http://image3.jpg">Master Bath</option>
<option value="http://image4jpg">Living Room</option>
</select>
</td>
<td width="100%" valign="top" align="left"><ilayer id="dynamic1" width=100% height=178><layer id="dynamic2" width=100% height=178><div id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>

[jscheuer1]

Not exactly. It is a little confusing as the form isn't separate from the display area, although it could be. First change it to this:


<table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
<tr>
<td width="35%" valign="top" align="left">
<form name="dynamicselector">
<select name="dynamicselector2" size="4" onChange="generateimage(this.options[this.selectedIndex].value)">

<option value="http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg" selected>DHTML Guide</option>
<option value="http://images.amazon.com/images/P/0201353415.01.TZZZZZZZ.jpg">DHTML QuickStart</option>
<option value="http://images.amazon.com/images/P/1556225865.01.TZZZZZZZ.jpg">HTML4</option>
<option value="http://images.amazon.com/images/P/1861001746.01.TZZZZZZZ.jpg">IE5 DHTML</option>
</select>
</form>
</td>
<td width="65%" valign="top" align="left"><ilayer id="dynamic1" width=100% height=178><layer id="dynamic2" width=100% height=178><div id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>

Now the form (red) is clearly separate from the display area (green). All the rest is just the table and isn't really required. You can now put the form wherever you like and the display area wherever you want it, just as long as the script comes after both of them on the page.