Bring mouseover popup image to front

**Bandaido** · 06-05-2013, 11:50 AM

Im trying to get a mouseover preview image to show on top of all website forms but cant find where to add focus() if thats what I need,
currently it shows but is loading behind the module and follows the mouse ok.

this is the tooltip.js file:

Code:

/*
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 id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;width:1px;height:1px;border:1px solid #888888;background:#DDDDDD;"><img id="ttimg" src="img/s.gif" /></div>')

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

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

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


function showtrail(width,height,file)
{
	if(navigator.userAgent.toLowerCase().indexOf('opera') == -1)
	{
		w=width
		h=height
		
		// followmouse()
	
		document.getElementById('ttimg').src=file
		document.onmousemove=followmouse
		gettrailobj().visibility="visible"
		gettrailobj().width=w+"px"
		gettrailobj().height=h+"px"


	}
}


function followmouse(e)
{

	if(navigator.userAgent.toLowerCase().indexOf('opera') == -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>docwidth)
		xcoord=xcoord-w-(20*2)

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

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

}

The ajax.js is:

Code:

function loadurl(dest,objnev)
{

	document.getElementById(objnev).innerHTML = "Processing...";

	try { xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
	xmlhttp.onreadystatechange = function() {triggered(objnev)};

	xmlhttp.open("GET", dest);
	xmlhttp.send(null);
}

function triggered(objnev)
{
	if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) { document.getElementById(objnev).innerHTML = xmlhttp.responseText; }
}

And im calling it from a html module with:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tooltip.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>

<body>
<div style="display: none; position: absolute;
z-index: 110; left: 400; top: 100; width: 15;
height: 15" id="preview_div"></div>

<img src="smallpic.jpg" width="100" height="142" style="padding-top:23px;" onmouseover="showtrail(310,440,'largepic.jpg');" onmouseout="hidetrail();" />


</body>
</html>

Thanks

**jscheuer1** · 06-05-2013, 01:27 PM

I don't see the AJAX script being used there, is it?

And, in such a simplistic HTML page, there doesn't appear to be anything that the preview could hide behind.

But, as there's an external stylesheet, there might be.

If there is, you can add z-index to the id="trailimageid" div:

Code:

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

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

BTW, it probably doesn't matter, but here:

Code:

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

That should probably be:

Code:

gettrailobj().visibility="hidden"

**Bandaido** · Yesterday, 12:35 AM

Thanks for your help,
The z-index fixed the issue and bought it to the front.

This was just another idea ive tried to fix it before posting here, just must of forgot to undo the change.

Code: