X

jQuery Get Cursor Location With X, Y Coordinates


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
commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

2 comments

  1. commenter

    that is not jQuery. no.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Subscribe to our email newsletter.

 

Advertisement

Category Posts