View Full Version : image rollover sample w/mouse track - at wits end...?

01-31-2007, 07:36 PM

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:

<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">');

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";
width = '100%';
height = '100%';


newHTML = '';

//Display on rollover
if (ShowSample > 0){

if(SampleType=='photo') {

newHTML = newHTML + '<div align="center" style="padding: 0px 0px 0px 0px;"><img src="'+ SamplePath +'" border="0"></div>';


//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;


//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.



gettrailobjnostyle().innerHTML = newHTML;


function setDiv(newW, newH){
//Below used for testing
//alert('This is it!!!!!!!!!!!!');
gettrailobj().width=newW + "px";
gettrailobj().height=newH + "px";

function hidetrail(){
gettrailobjnostyle().innerHTML = '';

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)



// call hidetrail once just to init things
// this prevents the first video from showing in the upper left momentarily in IE


Please note: a very important aspect of this process it the attributes assigned to "trailimageid" that are included in a stylesheet & listed below:

#trailimageid {
position: absolute;
visibility: hidden;
left: 0px;
top: 0px;
width: 450px;
height: 300px;
z-index: 1000;
padding: 4px;
border: solid 1px #666;

01-31-2007, 10:15 PM
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:
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. :confused:

If you have any insight please let me know.

Thanks for taking a look at my thread.

02-02-2007, 07:01 PM
Scratching me head???.


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? :confused:

Thanks for your assistance anyway.