Locate mouse

Question

What I'm trying to achieve is to make a DIV and display a world map image on it or as a background .. and when the user clicks on any map on the map, I catch the location of the mouse,

then I understand how to translate the X, Y mouse to longitude, latitude, and then run AJAX to display some data.

My problem:

• How to get mouse location using JavaScript.
• How to translate global click location into DIV relative X, Y coordinates of a layer

Answer 1

Take a look at this example:

• Click image and get coordinates with Javascript

The following posts may also help:

• Get the exact position to click on a linked image using jquery

• Creating HTML Image Maps

Answer 2

In HTML, you set the onMouseMove event:

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

And the javascript function:

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

Answer 3

If you have no reason to do this from scratch, I would recommend Google Maps Api .

You will notice that the Map object has a click event to which you can bind a callback that receives a MouseEvent that contains lat / long chords. Check out this example .

Answer 4

In the event handler, you can get it through mouseEvent Args.

Excerpt from http://msdn.microsoft.com/en-us/library/bb404721.aspx -

 function onMouseLeftButtonUp(sender, mouseEventArgs) { // Return a Point object representing the x- and y-coordinates of the current mouse position // relative to the reference object. var pt = mouseEventArgs.getPosition(sender.findName("referenceObject")); // Display the current mouse position. sender.findName("Status").text = pt.x + " : " + pt.y; }