473,378 Members | 1,531 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,378 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 26462
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: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.