flash movie change out with image

I have tables that contain image thumbnails and a large image area, user clicks thumbnails to change the large images in large image area. The default image in the large image area is just a .jpg that can be selected from a thumbnail to view again. The first set of code is an example of that.

Now the second set of code is that same type of table, except the default image is a flash movie. I want to create the same effect, that will be able to change or swap out the movie with the large images when user clicks the thumbnails.

this is all on this page http://www.superbrightleds.com/bi-pin.html#MR16-RGB


<table width="803" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="411" height="17"><div align="left"><img src="images/roundtable/410tabtop.gif" alt="" width="410" height="17" border="0" /></div></td>
<td width="333" rowspan="3"><div align="left"><a href="specs/G4-W6HP.htm"><img src="products/mr16/gu10.jpg" alt="" name="large4" width="333" height="201" border="0" id="large4" /></a></div></td>
<td width="59"><img src="images/roundtable/57tabtop.gif" alt="" width="59" height="17" border="0" /></td>
</tr>
<tr>
<td height="168" style="background:url(images/roundtable/410tabside.gif)"><div align="center">
<p><strong class="style9"><strong><strong class="style9">GU10 Base MR16 Bulbs</strong></strong> with<br />
High Power 1 Watt LEDs<br />
</strong> <span class="style65">High Power MR16 GU10 Bi-pin Twist-Lock base LED bulbs<br />
120~240 Volt AC operation - 1.38 inch (11/8") diameter</span><br />
<span class="style65">Fits standard GU10 base - 5mm pins with 10mm spacing</span></p>
<strong><b><a href="specs/MR16-W4-GU10.htm"><img onmouseover='xpe(this,1);' onmouseout='xpe(this,0);' onmousedown='xpe(this,2);' id="xpi_r7faa7" src="buttons-files/btr7faa_0.gif" name="vbr7faa" width="98" height="28" border="0" alt="More Info" /></a><a href=
"/cgi-bin/store/commerce.cgi?product=MR16"><img onmouseover='xpe(this,4);' onmouseout='xpe(this,3);' onmousedown='xpe(this,5);' id="xpi_67faa7" src="buttons-files/bt67faa_0.gif" name="vb67faa" width="98" height="28" border="0" alt="Buy Now" /></a></b></strong></div></td>
<td width="59" style="background:url(images/roundtable/57tabside.gif)"><table width="0" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="40" height="45"><div align="center"><a href="javascript://"><img src="products/mr16/gu10s.jpg" alt="" onmousedown="document.images['large4'].src='products/mr16/gu10.jpg'" width="45" height="40" border="0" /></a></div></td>
</tr>
<tr>
<td height="81"><div align="center"><a href="javascript://"><img src="products/mr16/gu10-w4s.jpg" alt="" onmousedown="document.images['large4'].src='products/mr16/gu10-w4.jpg'" width="45" height="40" border="0" /></a></div></td>
</tr>
<tr>
<td height="36"><div align="center"><a href="javascript://"><img src="products/mr16/gu10-wlxs.jpg" alt="" onmousedown="document.images['large4'].src='products/mr16/gu10-wlx.jpg'" width="45" height="40" border="0" /></a></div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="16"><div align="left"><img src="images/roundtable/410tabbottom.gif" alt="" width="410" height="18" border="0" /></div></td>
<td width="59" height="16"><img src="images/roundtable/57tabbottom.gif" alt="" width="59" height="18" border="0" /></td>
</tr>
</table>






<table width="803" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="411" height="17"><div align="left"><img src="images/roundtable/410tabtop.gif" alt="" width="410" height="17" border="0" /></div></td>
<td width="333" rowspan="3"><object type="application/x-shockwave-flash" data="products/mr16/mr16-rgb.swf" width="335" height="203">
<param name="movie" value="products/mr16/mr16-rgb.swf" />
</object></td>
<td width="59"><img src="images/roundtable/57tabtop.gif" alt="" width="59" height="17" border="0" /></td>
</tr>
<tr>
<td height="170" style="background:url(images/roundtable/410tabside.gif)"><div align="center"><strong class="style9"><strong><strong class="style9"><span class="style9">MR16 Bulb with<br />
Color Changing <span class="style19">R</span></span><span class="style94">G</span><span class="style96">B</span> <span class="style9">LEDs</span></strong></strong><br />
</strong> <span class="style65">12 Volt DC bulbs contain 30 LEDs: 12 Red, 9 Green and 9 Blue<br />
Built-in micro controller cycles LEDs through Red, Green, Blue<br />
Many combinations to produce vivid colors including:<br />
Aqua, Pink, White, Purple, Orange and Yellow<br />
Current Draw is 30ma to 108ma (depending on color being produced)<br />
at 12VDC - 14VDC max<br />
<br />
</span> <span class="style9"><a href="/cgi-bin/store/commerce.cgi?product=MR16"><img onmouseover='xpe(this,4);' onmouseout='xpe(this,3);' onmousedown='xpe(this,5);' id="xpi_67faa9" src="buttons-files/bt67faa_0.gif" name="vb67faa" width="98" height="28" border="0" alt=
"Buy Now" /></a></span></div></td>
<td width="59" style="background:url(images/roundtable/57tabside.gif)"><table width="0" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="40" height="34"><div align="center"></div></td>
</tr>
<tr>
<td width="40" height="34"><div align="center"></div></td>
</tr>
<tr>
<td width="40" height="34"><div align="center"></div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="16"><div align="left"><img src="images/roundtable/410tabbottom.gif" alt="" width="410" height="18" border="0" /></div></td>
<td width="59" height="16"><img src="images/roundtable/57tabbottom.gif" alt="" width="59" height="18" border="0" /></td>
</tr>
</table>

can a moderator put this in the correct category. I thought it was an html problem, it is just a flash movie in the code, and i need to be able to work with and over it in html

This is actually more of a javascript question.

Without seeing your JS code I can only give you general instructions (though that should be enough):
You need to change the function called on whatever event is supposed to swap out the image (it's probably an onclick="function()" or an href="javascript:function()"). Instead of changing the img src (or visibility, or location, or css background property - however it swaps the images) you're going to want to change the innerHTML of it's container element.

Also, you're only using the object element for your flash movie:


<object type="application/x-shockwave-flash" data="products/mr16/mr16-rgb.swf" width="335" height="203">
<param name="movie" value="products/mr16/mr16-rgb.swf" />
</object>


You'll also need an embed for it to work in all browsers:

<embed src="" width="" height=""></embed>


I wrote up this function you can use:

function loadFlashObject(target,filepath,width,height,transparent,fversion)
{
if (!fversion || fversion < 1 || fversion > 9) fversion = 8;
var htmlToAdd = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version='+fversion+',0,0,0" width="'+width+'" height="'+height+'">';
htmlToAdd += '<param name="movie" value="'+filepath+'">';
if (transparent) htmlToAdd += '<param name="wmode" value="transparent" />';
htmlToAdd += '<embed src="'+filepath+'" width="'+width+'" height="'+height+'"';
if (transparent) htmlToAdd += ' wmode="transparent"';
htmlToAdd += '></embed>';
htmlToAdd += '</object>';
htmlToAdd = '<span></span>'+htmlToAdd; //spans are for IE6
try
{
document.getElementById(target).innerHTML = htmlToAdd;
}
catch (e)
{
target.innerHTML = htmlToAdd;
}
}