PDA

View Full Version : 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:

/*
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:

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:

<!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:


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:


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

That should probably be:


gettrailobj().visibility="hidden"

Bandaido
06-06-2013, 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.

gettrailobj().visibility="show"

Thanks again