jQuery Get Cursor Location With X, Y Coordinates
- Article
- Comment (2)
With my one of a Mark Project , I am in need to find the location of a mouse cursor. First I tried to find a scracth from web, but I can’t find a right one. So I decided to code myself. Here I will give you simple code to get mouse cursor position coordinates.
First created a sample html to demonstrate the code.
<form name="pointform" method="post"> <div class="tab_image" > <img id="kv_content" onclick="point_it(event)" src="images/wp_piexlkit.png" style="width: 60%" /> </div> Mouse on x = <input type="text" name="form_x" size="4" style="width: 90px;" /> - y = <input type="text" name="form_y" size="4" style="width: 90px;" /> </form>
After that,we are going to write our jQuery code to get the mouse pointer coordinates.
<script language="JavaScript"> function point_it(event){ var kv_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("kv_content").offsetLeft; var kv_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("kv_contnet").offsetTop; //pring results on a form below the image. document.pointform.form_x.value = kv_x; document.pointform.form_y.value = kv_y; } </script>
That’s it, It will work on chrome an d IE 10 . If you have any doubts and updates comment below.
here is the demo link
demo
that is not jQuery. no.
Yes its pure javascript