Forum Moderators: open
The main problem that I have discovered is that once the target links are in a table, the relative positioning is not consistent and I feel that the table may be a causing factor.
Any help is appreciated.
Here is some of the code:
<html>
<head>
<script type="text/javascript">
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");
// Set popup to visible
hp.style.top = hoveritem.offsetTop + maintable.offsetTop + 10;
hp.style.left = hoveritem.offsetLeft + maintable.offsetTop + -40;
hp.style.visibility = "Visible";
}
function KeepPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");
// Set popup to visible
hp.style.top = hoveritem.offsetTop;
hp.style.left = hoveritem.offsetLeft;
hp.style.visibility = "Visible";
}
function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
</script>
</head>
<body>
<table id="maintable" width="95%" border="0" align="center" cellpadding="5" cellspacing="1">
<tr>
<td bgcolor="#eeeeee"> </td>
<td bgcolor="#eeeeee"><a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">(link)</a><br>some more random text</td>
<td bgcolor="#eeeeee"><a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">(link)</a></td>
</tr>
<tr>
<td bgcolor="#eeeeee"> </td>
<td bgcolor="#eeeeee">Another text link <a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">(link)</a></td>
<td bgcolor="#eeeeee"> </td>
</tr>
<tr>
<td bgcolor="#eeeeee"> </td>
<td bgcolor="#eeeeee">Another text link <a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">(link)</a></td>
<td bgcolor="#eeeeee"> </td>
</tr>
</table>
<p align="center">Another text link <a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">(link)</a></p>
<!-- START Popup1 -->
<div id="hoverpopup" style="visibility:hidden; position: absolute; width:200px; border:1px solid #ffffff; background-color:#ffffff;" onMouseOver="KeepPopup(this);" onMouseOut="HidePopup();">
<table width="200px" border="0" cellspacing="0" cellpadding="10" style="border:1px solid #000000;">
<tr>
<td class="tiny" align="left" nowrap="nowrap">
<a href="#">Link 1</a><br />
<a href="#">Link 2</a></td></tr>
</table>
</div>
</body>
</html>
// Set popup to visible
hp.style.top = hoveritem.offsetTop + maintable.offsetTop + 10;
hp.style.left = hoveritem.offsetLeft + maintable.offsetTop + -40;
hp.style.visibility = "Visible";
TO
// Set popup to visible
if ( hp.style.visibility!= "visible" ) {
hp.style.top = hoveritem.offsetTop + maintable.offsetTop + 10;
hp.style.left = hoveritem.offsetLeft + maintable.offsetTop + -40;
hp.style.visibility = "visible";
}
"Visible" may be ok, "visible" is safer.
The bottom link that is not in the table displays properly, however, the other links within the table place the div nowhere near the hover target. Is there something I could call for it to see if it is within a table and then adjust the offset accordingly?
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");
// Set popup to visible
if ( hp.style.visibility!= "visible" ) {
hp.style.top = hoveritem.offsetTop + 10;
hp.style.left = hoveritem.offsetLeft - 40;
hp.style.visibility = "visible";
}
}
