Menu Script from here. Got a problem.

[jamiller]

I'm building an in-house training course using html so I don't have to spend countless more hours re-rendering video for DVD.

So I'm embedding this video using object tags (only needs to be viewable on IE7. So I'm lucky here...).

And I'm using a menu script that I found here. Here's the link: http://www.dynamicdrive.com/dynamici...nylinkcss2.htm
The problem with this code is that it hides the video on the menu rollover. The sound continues but the screen goes black. I've tried a million different things and have come to the conclusion that it's something to do with the JavaScript file associated with this script. I could be wrong here but I've tried everything and nothing is working.

Here is the code in my "main.js" file:

function embedWMV(path) {
	document.write('<object id="video" width="100%" height="100%" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject">\n\
				<param name="url" value='+path+'/>\n\
				<param name="SendPlayStateChangeEvents" value="true" />\n\
				<param name="AutoStart" value="true" />\n\
				<param name="uiMode" value="full"/>\n\
				<PARAM NAME="WindowlessVideo" VALUE="1">\n\
				<param name="volume" value="0">\n\
				</object>');
}


var xmlDoc;
function loadXML() {
	if(window.ActiveXObject) {
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
		xmlDoc.async="false"
		xmlDoc.load("menu.xml")
		getXML();
	}
}
var NV;
function getXML() {
	for(var i=1; i<=6; i++) {
		var btn = document.getElementById('TT'+i);
		btn.NV = xmlDoc.getElementsByTagName('url')[i-1].childNodes[0].nodeValue;
		btn.Pop = document.getElementById('AA'+i);
		btn.innerHTML = xmlDoc.getElementsByTagName('title')[i-1].childNodes[0].nodeValue;
		btn.onclick = function() {
			video.url = this.NV;
			return clickreturnvalue()
		}
		btn.onmouseover = function() {
			dropdownmenu(this, event, 'AA1');
		}
	}
}

The html code. Not all, but the relavent pieces.
DocType is "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" in case it matters

<div id="navHolder">
	<div id="nav">
		<div id="menuList" style="display:block; height:200px">
			<ul>
				<li><a href="#"><span id="TT1"></span></a></li>
				<li><a href="#"><span id="TT2"></span></a></li>
				<li><a href="#"><span id="TT3"></span></a></li>
				<li><a href="#"><span id="TT4"></span></a></li>
				<li><a href="#"><span id="TT5"></span></a></li>
				<li><a href="#"><span id="TT6"></span></a></li>
			</ul>
		</div>
		<div id="navFoot" onclick="Effect.toggle(menuList,'slide', {duration:.5});" style="cursor:pointer"></div>
	</div>
</div>

<div id="AA1" style="width:300px; height:200px; position:absolute; background:White; z-index:100; visibility:hidden"></div>

<div style="position:absolute; top:0px">
	<script type="text/javascript">embedWMV('vids/1_user_preferences_login.avi')</script>
</div>

Anybody have any ideas?

[jamiller]

Solved it!

I turned the div holding the video to position:relative from position:absolute. Not sure why this solved it and frankly, I don't really care