Hi,

I have a project I'm working on for a client. They basically want a page where you click on a little icon, and a corresponding flash video will play in the "billboard" area. What I have so far, using a javascript to swap the "display:" style attribute of a DIV on a click of an icon, works well in FF and Safari, in that the flash video stops automatically when the div is swapped. BUT, in IE, the video doesn't stop when you swap to another DIV. It keeps playing in the background. I can't figure out how to make it stop when the div is swapped.

You can see what I have here: http://mediumfusion.com/clients/realimages

here's my code:

index.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" type="text/css" href="styles.css" />
	<title>Real Images Video Productions, Inc.</title>
	
	<script src="javascripts/swap_content.js" type="text/javascript" charset="utf-8"></script>
	<script src="javascripts/swap_billboard.js" type="text/javascript" charset="utf-8"></script>
	<script src="javascripts/validate_form.js" type="text/javascript" charset="utf-8"></script>
	<script src="javascripts/ufo.js" type="text/javascript" charset="utf-8"></script>
	
</head>

<body>

<!-- only relevant code listed -->
    	<div id="content">
		<div id="billboard">
			<div id="bb_main"><p>billboard area</p></div>
			<div id="f1">
				<p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this video.</p>
				<script type="text/javascript">
						var FO = {	movie:"flvplayer.swf",width:"480",height:"360",majorversion:"7",build:"0",allowfullscreen:"false",
							flashvars:"file=media/aa2.flv&displayheight=340&autostart=true" };
						UFO.create(	FO, "player1");
				</script>
			</div>
			<div id="f2"><p>content2</p></div>
			<div id="f3"><p>content3</p></div>
			<div id="f4"><p>content4</p></div>
			<div id="f5"><p>content5</p></div>
			<div id="f6"><p>content6</p></div>
			<div id="f7"><p>content7</p></div>
			<div id="f8"><p>content8</p></div>
			<div id="f9"><p>content9</p></div>
			<div id="f10"><p>content10</p></div>
			<div id="f11"><p>content11</p></div>
			<div id="f12"><p>content12</p></div>
			<div id="f13"><p>content13</p></div>
			<div id="f14"><p>content14</p></div>
			<div id="f15"><p>content15</p></div>
			<div id="f16"><p>content16</p></div>
			<div id="f17"><p>content17</p></div>
			<div id="f18"><p>content18</p></div>
		</div>

  		<div id="icons">
			<div id="i1"><a href="#" onclick="togBB('f1');return false;"></a></div>
			<div id="i2"><a href="#" onclick="togBB('f2');return false;"></a></div>
			<div id="i3"><a href="#" onclick="togBB('f3');return false;"></a></div>
			<div id="i4"><a href="#" onclick="togBB('f4');return false;"></a></div>
			<div id="i5"><a href="#" onclick="togBB('f5');return false;"></a></div>
			<div id="i6"><a href="#" onclick="togBB('f6');return false;"></a></div>
			<div id="i7"><a href="#" onclick="togBB('f7');return false;"></a></div>
			<div id="i8"><a href="#" onclick="togBB('f8');return false;"></a></div>
			<div id="i9"><a href="#" onclick="togBB('f9');return false;"></a></div>
			<div id="i10"><a href="#" onclick="togBB('f10');return false;"></a></div>
			<div id="i11"><a href="#" onclick="togBB('f11');return false;"></a></div>
			<div id="i12"><a href="#" onclick="togBB('f12');return false;"></a></div>
			<div id="i13"><a href="#" onclick="togBB('f13');return false;"></a></div>
			<div id="i14"><a href="#" onclick="togBB('f14');return false;"></a></div>
			<div id="i15"><a href="#" onclick="togBB('f15');return false;"></a></div>
			<div id="i16"><a href="#" onclick="togBB('f16');return false;"></a></div>
			<div id="i17"><a href="#" onclick="togBB('f17');return false;"></a></div>
			<div id="i18"><a href="#" onclick="togBB('f18');return false;"></a></div>
	     </div>
			
  	</div>
  </div>

</body>
</html>
The billboard swap javascript (swap_billboard.js)
Code:
/*
Global "swap" holder
Use value, null, if no layer initially visible
*/
var currBBId = "bb_main";

function togBB(id)
{
if(currBBId) setBBDisplay(currBBId, "none");
if(id)setBBDisplay(id, "block");
currBBId = id;
}

function setBBDisplay(id,value)
{
var elmBB = document.getElementById(id);
elmBB.style.display = value;
}
I'm also using the UFO.js flash object script from http://www.bobbyvandersluis.com/ufo/