473,320 Members | 1,976 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

How Can I Find Mouse Position Inside of a Div Tag?

I have a DIV element. How can I find mouse position (top and left)
inside of this DIV?

<div onMouseMove="getPositions();"
style="width:200px;height:100px"></div>

function getPositions(ev){
????????????????
}

Jan 5 '07 #1
4 26457
vu******@gmail.com wrote:
I have a DIV element. How can I find mouse position (top and left)
inside of this DIV?

<div onMouseMove="getPositions();"
style="width:200px;height:100px"></div>

function getPositions(ev){
????????????????
}
function getPositions(ev) {
if (ev == null) { ev = window.event }
_mouseX = ev.clientX;
_mouseY = ev.clientY;
}

--
http://www.hunlock.com -- Musings in Javascript, CSS.
$FA
Jan 5 '07 #2

vu******@gmail.com wrote:
I have a DIV element. How can I find mouse position (top and left)
inside of this DIV?
This is difficult. The event object has clientX and clientY properties
which describe where the event occurred relative to the browser window
in pixels. If you then add the amount by which the page has been
scrolled then you know where the event occurred relative to the web
page. Now if you can determine the position of the div relative to the
web page then you will can subtract the position of the div from the
position of the event and they you have your answer. Determining the
position of the mouse relative to the page is relatively easy.
Determining the position of the div relative to the page may be very
difficult in general but easy in certain cases.

Peter

Jan 6 '07 #3
Peter Michaux wrote:
vu******@gmail.com wrote:
>I have a DIV element. How can I find mouse position (top and left)
inside of this DIV?

This is difficult. The event object has clientX and clientY properties
which describe where the event occurred relative to the browser window
in pixels. If you then add the amount by which the page has been
scrolled then you know where the event occurred relative to the web
page. Now if you can determine the position of the div relative to the
web page then you will can subtract the position of the div from the
position of the event and they you have your answer. Determining the
position of the mouse relative to the page is relatively easy.
Determining the position of the div relative to the page may be very
difficult in general but easy in certain cases.

Peter
http://www.quirksmode.org/js/findpos.html

Quirksmode has a function which returns the top and left position of the
target element, that can be subtracted from the current mouse position
to obtain relative positions. It's a useful clip, I think the
javascript faqs have something similar too.

--
http://www.hunlock.com -- Musings in Javascript, CSS.
$FA
Jan 6 '07 #4
pcx99 wrote:
>
http://www.quirksmode.org/js/findpos.html

Quirksmode has a function which returns the top and left position of the
target element, that can be subtracted from the current mouse position
to obtain relative positions. It's a useful clip, I think the
javascript faqs have something similar too.
The quirksmode script will only work for very limited set of simple
pages where there are not scrolled elements and other various trickier
situations. The Yahoo! UI, ajaxtoolbox, and Flanagan's book have
better but not generally applicable position reporting functions which
is a difficult problem in general.

Peter

Jan 6 '07 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: madmike | last post by:
Hi, I have an iframe with some javascipt that gets the mouse x and y position like this: //inside the iframe's onmousemove call back funciton xMousePos = window.event.clientX +...
13
by: Lars Netzel | last post by:
Hi! I have a round area which I want to be able to move the mouse over and fire off events... how do I do that? I have drawn a FillPie Graphics and I feel that there has to be a way of...
16
by: Niels Jensen | last post by:
I have been developing a little project which draw's a hexgrid on a panel within a form similar to this - it:s used as a client from a e-mail based strategy game: ____ ____ / \...
2
by: Sam | last post by:
Hi, I can't figure out how to detect when my mouse cursor leaves a panel control. It should not trigger the event (or do anything) when the mouse leave the panel but still is over a control that...
2
by: quickcur | last post by:
Hi, I have html like this: <div id="myCanvas" style="border:10px, black;position:relative;height:250px;width:100%;"> <img id="p" src="p.jpg"> </div> When user click the mosue, I would like ...
3
by: wanwan | last post by:
I made a game with a window form that needs to record the mouse position to an array at 100 samples per second, so I use the mouse move event to do the job. The problem is the mouse move event...
4
by: =?Utf-8?B?Unlhbg==?= | last post by:
I have a winform containing a scrollable panel and a groupbox inside the panel. There is a button inside the groupbox. When that button is clicked; how do I capture and display the X and Y...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.