By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,285 Members | 2,124 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,285 IT Pros & Developers. It's quick & easy.

Absolute cursor location

P: n/a
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

Nov 19 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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

"Sid S." <Si**@discussions.microsoft.com> skrev i meddelandet
news:93**********************************@microsof t.com...
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

Nov 19 '05 #2

P: n/a
How is this done with JavaScript?

"Lars Netzel" wrote:
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

"Sid S." <Si**@discussions.microsoft.com> skrev i meddelandet
news:93**********************************@microsof t.com...
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


Nov 19 '05 #3

P: n/a
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

"Sid S." <Si**@discussions.microsoft.com> skrev i meddelandet
news:CC**********************************@microsof t.com...
How is this done with JavaScript?

"Lars Netzel" wrote:
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

"Sid S." <Si**@discussions.microsoft.com> skrev i meddelandet
news:93**********************************@microsof t.com...
> 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
>


Nov 19 '05 #4

P: n/a
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.visibil ity = 'hidden'; }
}
</SCRIPT>
Nov 19 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.