http://63.84.226.251/RollOverDisplay...erDisplay.html

I'm adapting a fairly popular process for displaying samples. Examples can be seen at http://www.istock.com / http://www.revostock.com/, and others.

It seems they all start off with a common script available - Image Trail script- By JavaScriptKit.com. I'm taking this idea a few steps further and attempting to allow it to handle images, flash video (.flv), and native flash files (swf). I have it functioning flawlessly for both images and FLV's. My problems are with swf's.

Issues to note: because I know nothing about the dimensions of the swf samples, I load my samples into a swfPlayer (of sorts). This allows me to import the sample, grab its dimensions, send them back to the page, and make the necessary adjustments to display the swf properly. Because of this unknown, I set the swf embed to display at 100% of the area it occupies. If this swf were embedded in its own page & displayed in its own window it would be constrained only by the browser; occupying the entire browser stage. To reign this in the size properties sent to the page are then assigned to the div containing the swf which then constrains it within the proper dimensions.

I actually have this process functioning. However there are glitches. In FF (2.0) the swf height is not setting to 100%. This is actually a documented issue but the only solution I seem to have found that works calls for removal of the page’s <!DOCTYPE> declaration. Unfortunately this is not a solution I can implement. So I'm currently stuck, still tiring to solve this issue. Additionally, the div resizing that occurs when a swf is loaded is glitchy. I am able to eliminate this by hiding the div (visibility=hidden), exposing it only after the sample swf has loaded and it's size attributes are consumed and assigned to the div holding it. This works great in FF but seems to stop the entire process from executing in IE.

Any advice would be appreciated.

Below is the script in it's current state:
Code:
<script type="text/javascript"><!--

			/*
			Simple Image Trail script- By JavaScriptKit.com
			Visit http://www.javascriptkit.com for this script and more
			This notice must stay intact
			*/
			
			var offsetfrommouse=[15,15]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
			var displayduration=0; //duration in seconds image should remain visible. 0 for always.
			var currentimageheight = 270;	// maximum image size
			
			if (document.getElementById || document.all){
				document.write('<div id="trailimageid">');
				document.write('</div>');
			}
			
			function gettrailobj(){
				if (document.getElementById)
					return document.getElementById("trailimageid").style
				else if (document.all)
					return document.all.trailimageid.style
			}
			
			function gettrailobjnostyle(){
				if (document.getElementById)
					return document.getElementById("trailimageid")
				else if (document.all)
					return document.all.trailimageid
			}
			
			
			function truebody(){
				return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
			}
			
			function showtrail(SamplePath,SampleType,ShowSample,w,h){
				if(w > 0 && h > 0){
					width = w + "px";
					height = h + "px";
					gettrailobj().width=width;
					gettrailobj().height=height;
					}
				else{	
					width = '100%';
					height =  '100%';
				}
	
						
				document.onmousemove=followmouse;
				
				newHTML = '';
				
				//Display on rollover
				if (ShowSample > 0){
				
					//Image 
					if(SampleType=='photo') {
						
						newHTML = newHTML + '<div align="center" style="padding: 0px 0px 0px 0px;"><img src="'+ SamplePath +'" border="0"></div>';
						
						gettrailobj().visibility="visible";	
					}
					
					//FLASH Video
					else if(SampleType=='video') {
					
						temp = '<div align="center" style="margin: 0px; padding: 0px; background-color: black;">'
							 + '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+width+'" height="'+height+'" align="middle">'
							 + '<param name="allowScriptAccess" value="sameDomain" />'
							 + '<param name="movie" value="VideoPlayer.swf" />'
							 + '<param name="quality" value="high" />'
							 + '<param name="bgcolor" value="#3c3c3c" />'
							 + '<param name="FlashVars" value="path='+SamplePath+'" />'
							 + '<embed FlashVars="path='+SamplePath+'" src="VideoPlayer.swf" quality="high" bgcolor="#3c3c3c" width="'+width+'" height="'+height+'" name="player" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'
							 + '</object>'
							 + '</div>';
			
					   	newHTML += temp;
					   	
					   	gettrailobj().visibility="visible";
			
					}
					//FLASH swf
					else if(SampleType=='swf') {
						
						temp = '<div align="center" style="margin: 0px; padding: 0px; background-color: black;">'
							 + '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="'+width+'" height="'+height+'" align="TL">'
							 + '<param name="allowScriptAccess" value="always" />'
							 + '<param name="movie" value="SwfPlayer1.swf" />'
							 + '<param name="quality" value="high" />'
							 + '<param name="bgcolor" value="#3c3c3c" />'
							 + '<param name="FlashVars" value="path='+SamplePath+'" />'
							 + '<embed FlashVars="path='+SamplePath+'" src="SwfPlayer1.swf" quality="high" width="'+width+'" height="'+height+'" bgcolor="#3c3c3c" name="player" align="TL" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'
							 + '</object>'
							 + '</div>';
			
					   	newHTML += temp;
					   	
					   	//1. if set to hidden - IE does not display when setDiv() is fired from SwfPlayer1.swf
					   	//2. when set to hidden, the resizing of the parent div is not seen. The result less glitchy
					   	//but only function in FireFox - havent tested other browser as of yet.
					   	gettrailobj().visibility="visible";
			
					}
				
				}
			
				gettrailobjnostyle().innerHTML = newHTML;

			}
			
			
			function setDiv(newW, newH){
				//Below used for testing
				//alert('This is it!!!!!!!!!!!!');
				document.getElementById('test1').innerHTML=newW;
				document.getElementById('test2').innerHTML=newH;
				gettrailobj().visibility="visible";
				gettrailobj().width=newW + "px";
				gettrailobj().height=newH + "px";
			}
			
			
			function hidetrail(){
				gettrailobj().visibility="hidden"
				gettrailobjnostyle().innerHTML = '';
				document.onmousemove=""
				gettrailobj().left="-500px"
			}
			
			function followmouse(e){
			
				var xcoord=offsetfrommouse[0]
				var ycoord=offsetfrommouse[1]
			
				var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
				var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)
			
				if (typeof e != "undefined"){
					if (docwidth - e.pageX < 450){
						xcoord = e.pageX - xcoord - 450; // Move to the left side of the cursor
					} else {
						xcoord += e.pageX;
					}
					if (docheight - e.pageY < currentimageheight){
						ycoord += e.pageY - ycoord - 300;
					} else {
						ycoord += e.pageY;
					}
				
				} else if (typeof window.event != "undefined"){
					if (docwidth - event.clientX < 450){
						xcoord = event.clientX + truebody().scrollLeft - xcoord - 450; // Move to the left side of the cursor
					} else {
						xcoord += truebody().scrollLeft+event.clientX
					}
					if (docheight - event.clientY < (currentimageheight + 50)){
						ycoord += event.clientY + truebody().scrollTop - Math.max(0,(50 + currentimageheight + event.clientY - docheight));
					} else {
						ycoord += truebody().scrollTop + event.clientY;
					}
				}
			
				var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
				var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
			
				gettrailobj().left=xcoord+"px"
				gettrailobj().top=ycoord+"px"
			
			}
			
			// call hidetrail once just to init things
			// this prevents the first video from showing in the upper left momentarily in IE
			
			hidetrail();
			
		--></script>
Please note: a very important aspect of this process it the attributes assigned to "trailimageid" that are included in a stylesheet & listed below:
Code:
#trailimageid {
	position: absolute;
	visibility: hidden;
	left: 0px;
	top: 0px;
	width: 450px;
	height: 300px;
	z-index: 1000;
	padding: 4px;
	border: solid 1px #666;
}