如何从图像输入中获取x& y corrdinates? [英] How do get the x&y corrdinates from an image input?
本文介绍了如何从图像输入中获取x& y corrdinates?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个输入设置为一种图像:
I have an input set to a type of image:
<form id="MapForm" action="#">
<input type="image" src="usa.jpg" id="usa_map" alt="USA"/>
</form>
我想附加一个功能,以便我可以获得X& Y点击一个人点击的位置:
I want to attach a function so that I can get the X & Y coordinates where a person clicked:
$('#MapForm').submit(ClickOnMap);
function ClickOnMap(data)
{
return false;
}
我找不到X& Y坐标'数据'。我做错了什么?
I cannot find the X & Y coordinates inside 'data'. What am I doing wrong?
推荐答案
这里有一个很好的教程,在jQuery文档中:
There's a good tutorial on this here, in the jQuery docs:
$('#usa_map').click(function(e){
//Grab click position, mis the offset of the image to get the position inside
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
alert('X: ' + x + ', Y: ' + y);
//set 2 form field inputs if you want to store/post these values
//e.g. $("#usa_map_x").val(x); $("#usa_map_y").val(y);
//Submit the form
$('#MapForm').submit();
});
这篇关于如何从图像输入中获取x& y corrdinates?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文