Bring mouseover popup image to front
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
