Absolute cursor location

[Guest]

How can I find the absolute cursor location? Where the mouse cursor is
located with repect to the body.
This way I can position an div tag where the mouse is, even if scrolled down
farther on the page.



Any help would be appreciated.
Sid Sidney

 

[Lars Netzel]

Yes, but not with ASP.NET since that's executing at the server. What you
want to do is needed to do at the client which means JavaScript is the best
way to go.

For eaxmple dynamic and nice animated Menus are made with JavaScript and
DHTML.

best regards/
Lars

 

[Guest]

How is this done with JavaScript?

Yes, but not with ASP.NET since that's executing at the server. What you
want to do is needed to do at the client which means JavaScript is the best
way to go.

For eaxmple dynamic and nice animated Menus are made with JavaScript and
DHTML.

best regards/
Lars

 

[Lars Netzel]

I asume you know some Javascript already, Otherwise you'll need to learn
some basics in Javascript first. I haven't done anythign with Mouse
positions but i know it's not too hard, seen colegues do it.

One easy thing to check MousePosition things with is if you check the source
code for a site where they have those little images following the cursor
when you move. They were quite popular for a while in the beginning when
people started to make homepages and every now and then you bump into them.

If you do know the basics... then search for how to Build DHTML menus or
Javascript Menus... or just go to a site which have some cool client
features and check to see how they did it, that's how I learn things.. and
asking here of course.

best regards
/Lars

 

[Ben Amada]

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:hidden;
FONT:10pt comic sans ms; BORDER-LEFT:black 2px solid;
WIDTH:200px; PADDING-TOP:7px; BORDER-BOTTOM:black 2px solid;
POSITION:absolute; TOP:800px; HEIGHT:120px;
TEXT-ALIGN:center; z-index:1; background-image:
url('images/winmsg_back.gif'); " />


====== Call to Javascript =======
<span id="win1" onmouseover="richToolTip('Test Message',event);"
onmouseout="hideToolTip();" ><img src=images/awesome.gif height=35 width=35
/></span>


====== Javascript =======
<SCRIPT language=JavaScript>
function richToolTip(WinMsg, e)
{
var xCoord = 0;
var yCoord = 0;
var oScreenWidth = 0;
var oScreenHeight = 0;
var myElement;

if (document.layers)
{
// old Netscape versions
myElement = document.divWinMsg;
if ((myElement == null) || (myElement == "undefined"))
{ myElement = document.getElementById('divWinMsg'); }

oScreenWidth = window.innerWidth;
oScreenHeight = window.innerHeight;

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.getElementById('divWinMsg');

if (myElement != null && myElement != "undefined")
{
oScreenWidth = document.body.clientWidth;
oScreenHeight = document.body.clientHeight;

xCoord = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft + 15;
yCoord = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop + 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.innerHTML = WinMsg;
if (document.layers)
{

if (typeof myElement.style.top != 'number')
{ eval("myElement.moveTo(xCoord, yCoord)"); }
else
{ myElement.style.top = yCoord;
myElement.style.left = xCoord; }

if ((myElement.style.visibility == null) ||
(myElement.style.visibility == "undefined"))
{ myElement.visibility = 'visible'; }
else
{ myElement.style.visibility = 'visible'; }

}
else
{
myElement.style.top = yCoord;
myElement.style.left = xCoord;
myElement.style.visibility = 'visible';
}
}
}

function hideToolTip()
{
if (document.layers)
{
// old Netscape versions
var myElement = document.divWinMsg;
if ((myElement == null) || (myElement == "undefined"))
{ myElement = document.getElementById('divWinMsg'); }
if ((myElement.style.visibility == null) ||
(myElement.style.visibility == "undefined"))
{ myElement.visibility = 'hidden'; }
else
// IE and newer versions of Netscape
{ myElement.style.visibility = 'hidden'; }
}
else
{ document.getElementById('divWinMsg').style.visibility = 'hidden'; }
}
</SCRIPT>