Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts

    image rollover sample w/mouse track - at wits end...?

    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;
    }
    Last edited by hothousegraphix; 01-31-2007 at 06:47 PM.

  • #2
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ancora - thanks for the response.

    I actually have this process (for my FLASH object) working in IE - it's glitchy but I think the solution you've provided may address that. It seems for whatever reason, when the user rolls over that active thumb (in IE) the page rewrites itself. This only occures in the instances where the re-sizing takes place. I think your suggestion of moving the content off stage will address this issue.

    However, I'm still dealing with FF 2.0 and it's inability to handle FLASH objects sizing by "%". If I put my document in "quirks mode" it functions fine but at this point I don't think thats a real option. This seems to be a well documented issue:
    http://www.quip.net/blog/2006/flash/...-sized-firefox
    I think what I'm experiencing is related. The difference with my situation is that what's constraining my FLASH object is a div. The width is setting properly, it's the height that seems to be ab issue. When my swf writes to the page it sizes to 200px high, regardless of whats loaded. I have no idea where thats value comes from.

    If you have any insight please let me know.

    Thanks for taking a look at my thread.

  • #3
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Scratching me head???.

    Ancora-

    I came back to my thread and was going to apologize to you for the delay in my response and I see, for whatever reason, though you had been corresponding with me that your posts to my thread were deleted?

    Thanks for your assistance anyway.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •