made by JavaKitScript. does anyone know how to set this up. theres no instructions, just the code. I did find another image trail similar called magnifimage. its working, but the popup image is blurred and stretched, and i cant get it to look right. Can someone look at the code that ive used and see if they can locate the problem i have. Thanks <div align="center" id="Week 1-1"><img src="http://www.sportschatbox.com/images/mag.jpg" width="17" height="15" border=0 alt='New Orleans Saints @ Indianapolis Colts' style="border-color: CCCCCC" onmouseover="showtrail('http://www.sportschatbox.com/images/nfl/week1-1.1.jpg ','Week 1-1',300,300)" onmouseout="hidetrail()" ></a></div> Code (markup): down at the bottom, i have this <script type='text/javascript' src='js/magnifimage.js'></script> <script type='text/javascript'> MagnifImage.setup( "Week 1-1", "/images/nfl/week1-1.1.jpg", "" // <- No comma after last parameter ); MagnifImage.preLoad(false); </script> Code (markup): Now, this is for the magnifimage. Thanks in advance for your help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Any Title</title> <script type="text/javascript"> var floatWidth = 220; // set the width of the floating image var floatHeight = 160; // set its height // ************** DO NOT EDIT BELOW THIS LINE **************** var midWindow = 0; var nContainer = ""; var IE = false; if (navigator.appName == 'Microsoft Internet Explorer'){IE = true} function stayHome(m){ if (IE) { var currX = event.clientX; var currY = event.clientY; } else { var currX = m.pageX; var currY = m.pageY; } if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop) { var iL = document.documentElement.scrollLeft; var iV = document.documentElement.scrollTop; } else { var iL = document.body.scrollLeft; var iV = document.body.scrollTop; } if (currX > midWindow-30) { var msgWidth = nContainer.clientWidth; if (IE){nContainer.style.left = (currX-msgWidth-10+iL)+'px'} else {nContainer.style.left = (currX-msgWidth-10)+'px'} } else { if (IE){nContainer.style.left = (currX+10+iL)+'px'} else {nContainer.style.left = (currX+10)+'px'} } if (IE){nContainer.style.top = (currY+iV-(floatHeight/2)-12)+'px'} else {nContainer.style.top = (currY-(floatHeight/2)-12)+'px'} } function hideImage(){ while (nContainer.lastChild) {nContainer.removeChild(nContainer.lastChild)} document.getElementById('isFloat').style.display = 'none'; } function showImage(isImg,currItem,currCaption){ document.getElementById('isFloat').style.display = 'inline'; nIMG = document.createElement('img'); nContainer.appendChild(nIMG); nIMG.setAttribute('src',isImg); nIMG.setAttribute('width',floatWidth); nIMG.setAttribute('height',floatHeight); nCaption = document.createElement('div'); nCaption.style.textAlign = "center"; nCaption.style.backgroundColor = '#EAE3C6'; nCaption.style.padding = '5px'; nCaption.style.color = '#000000'; nCaption.style.fontSize = '10pt'; nContainer.appendChild(nCaption); nCaption.innerHTML = currCaption; currItem.onmouseout=hideImage; } function getMidWindow(){ if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop) { midWindow = document.documentElement.clientWidth/2; } else { midWindow = document.body.clientWidth/2; } } function initFloatImg(){ var nBody = document.getElementsByTagName('body')[0]; var nDiv = document.createElement('div'); nDiv.id = "isFloat"; nDiv.style.position = "absolute"; nDiv.style.top = "0px"; nDiv.style.left = "0px"; nDiv.style.border = "1px solid black"; nDiv.style.padding = "5px"; nDiv.style.backgroundColor = "#ffff00" nBody.appendChild(nDiv); nContainer = document.getElementById('isFloat'); document.onmousemove = stayHome; hideImage(); if (!IE){document.captureEvents(Event.mousemove)} getMidWindow(); } onload=initFloatImg; onresize=getMidWindow; </script> </head> <body> <table align='center'> <tbody> <tr> <td height='300'> <img src='1/moon.jpg' width='120' height='90' onmouseover="showImage(this.src,this,'The Moon')" alt=''> </td> </tr> <tr> <td height='300'> <img src='1/earth.jpg' width='120' height='90' onmouseover="showImage(this.src,this,'The Earth is the third<br>planet from the Sun.<br>Good Morning!')" alt=''> </td> </tr> </tbody> </table> </body> </html> Code (markup):