Hi Sid,
Here's an example Javascript that I'm using that moves a hidden DIV to the
location of the cursor and makes the DIV visible while the mouse is hovering
over a SPAN element:
====== Hidden DIV ======
<div id=divWinMsg style="BORDER-RIGHT:black 2px solid;
BORDER-TOP:black 2px solid; LEFT:300px; VISIBILITY:hidd en;
FONT:10pt comic sans ms; BORDER-LEFT:black 2px solid;
WIDTH:200px; PADDING-TOP:7px; BORDER-BOTTOM:black 2px solid;
POSITION:absolu te; TOP:800px; HEIGHT:120px;
TEXT-ALIGN:center; z-index:1; background-image:
url('images/winmsg_back.gif '); " />
====== Call to Javascript =======
<span id="win1" onmouseover="ri chToolTip('Test Message',event) ;"
onmouseout="hid eToolTip();" ><img src=images/awesome.gif height=35 width=35
/></span>
====== Javascript =======
<SCRIPT language=JavaSc ript>
function richToolTip(Win Msg, e)
{
var xCoord = 0;
var yCoord = 0;
var oScreenWidth = 0;
var oScreenHeight = 0;
var myElement;
if (document.layer s)
{
// old Netscape versions
myElement = document.divWin Msg;
if ((myElement == null) || (myElement == "undefined" ))
{ myElement = document.getEle mentById('divWi nMsg'); }
oScreenWidth = window.innerWid th;
oScreenHeight = window.innerHei ght;
xCoord = e.pageX + 15;
yCoord = e.pageY + 15;
if (xCoord + 200 + 5 > oScreenWidth)
{ xCoord = xCoord - 225; }
if (yCoord + 120 + 15 > oScreenHeight)
{ yCoord = yCoord - 150; }
}
else
{
// IE and newer versions of Netscape
myElement = document.getEle mentById('divWi nMsg');
if (myElement != null && myElement != "undefined" )
{
oScreenWidth = document.body.c lientWidth;
oScreenHeight = document.body.c lientHeight;
xCoord = e.clientX + document.body.s crollLeft +
document.docume ntElement.scrol lLeft + 15;
yCoord = e.clientY + document.body.s crollTop +
document.docume ntElement.scrol lTop + 15;
if (e.clientX + 200 + 5 > oScreenWidth)
{ xCoord = xCoord - 225; }
if (e.clientY + 120 + 15 > oScreenHeight)
{ yCoord = yCoord - 150; }
}
}
if (xCoord != 0 && yCoord != 0 && myElement != null && myElement !=
"undefined" )
{
myElement.inner HTML = WinMsg;
if (document.layer s)
{
if (typeof myElement.style .top != 'number')
{ eval("myElement .moveTo(xCoord, yCoord)"); }
else
{ myElement.style .top = yCoord;
myElement.style .left = xCoord; }
if ((myElement.sty le.visibility == null) ||
(myElement.styl e.visibility == "undefined" ))
{ myElement.visib ility = 'visible'; }
else
{ myElement.style .visibility = 'visible'; }
}
else
{
myElement.style .top = yCoord;
myElement.style .left = xCoord;
myElement.style .visibility = 'visible';
}
}
}
function hideToolTip()
{
if (document.layer s)
{
// old Netscape versions
var myElement = document.divWin Msg;
if ((myElement == null) || (myElement == "undefined" ))
{ myElement = document.getEle mentById('divWi nMsg'); }
if ((myElement.sty le.visibility == null) ||
(myElement.styl e.visibility == "undefined" ))
{ myElement.visib ility = 'hidden'; }
else
// IE and newer versions of Netscape
{ myElement.style .visibility = 'hidden'; }
}
else
{ document.getEle mentById('divWi nMsg').style.vi sibility = 'hidden'; }
}
</SCRIPT>
