Floating image preview in Javascript

[TruBD]

<script>
/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/ 

var w=1
var h=1

if (document.getElementById || document.all)
document.write('<div"trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;width:1px;height:1px;border:1px solid #888888;background:#DDDDDD;"&gt;&lt;img id="ttimg" src="img/s.gif" /&gt;&lt;/div&gt;')

function gettrailobj()
{
	if (document.getElementById) return document.getElementById("trailimageid").style
	else if (document.all) return document.all.trailimagid.style
}

function truebody()
{
	return (!window.opera &amp;&amp; document.compatMode &amp;&amp; document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail()
{
	document.onmousemove=""
	document.getElementById('ttimg').src='img/s.gif'
	gettrailobj().visibility="hidden"
	gettrailobj().left=-1000
	gettrailobj().top=0
}


function showtrail(width,height,file)
{
	if(navigator.userAgent.toLowerCase().indexOf('opera') == -1 &amp;&amp; navigator.userAgent.toLowerCase().indexOf('safari') == -1)
	{
		w=width
		h=height

		// followmouse()

		gettrailobj().visibility="visible"
		gettrailobj().width=w+"px"
		gettrailobj().height=h+"px"
		document.getElementById('ttimg').src=file
		document.onmousemove=followmouse
	}
}


function followmouse(e)
{

	if(navigator.userAgent.toLowerCase().indexOf('opera') == -1 &amp;&amp; navigator.userAgent.toLowerCase().indexOf('safari') == -1)
	{

		var xcoord=20
		var ycoord=20

		if (typeof e != "undefined")
		{
			xcoord+=e.pageX
			ycoord+=e.pageY
		}
		else if (typeof window.event !="undefined")
		{
			xcoord+=truebody().scrollLeft+event.clientX
			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)

		if (xcoord+w+3&gt;docwidth)
		xcoord=xcoord-w-(20*2)

		if (ycoord-truebody().scrollTop+h&gt;truebody().clientHeight)
		ycoord=ycoord-h-20;

		gettrailobj().left=xcoord+"px"
		gettrailobj().top=ycoord+"px"

	}

}
&lt;/script&gt;
&lt;img onmouseover="showtrail(200,200,'image1_large.jpg');" onmouseout="hidetrail();" src="image1_small.jpg" width="100" height="100" style="padding-top:10px;" /&gt;


&lt;img onmouseover="showtrail(200,200,'image2_large.jpg');" onmouseout="hidetrail();" src="image2_small.jpg" width="100" height="100" style="padding-top:10px;" /&gt;

the above makes a preview image popup over an existing image in the code, now in IE when you put your mouse over the image so that the new one shows up it displays a gray box with that broken image sign that IE normally does while its loading the preview image.

what i wanted to was is it possible to get rid of that? maybe preload an existing image and use it as a background to the hover effect while the new image loads?

if you go to www.templatemonster.com you will see what i mean when you hover over their thumbnails it gives you this little effect of it loading...

any help would be appreciated.

EDIT: think i got some of it, the s.gif file is what preloads before hand. i replaced it with an animated gif but it never animates when it loads...? also i cant seem to position the image in the middle of the "showtrail" popup without messing up the alignment altogether

Edited April 26, 2006 by TruBD

[mattrobs]

Did you just copy it from templatemonster.com'se?

Try the step-by-step guides, like Dynamic Drive's similar script.

Or, try a better method like Lightbox JS.