如何从图像输入中获取x和y坐标？

我有一个输入设置为一个类型的图像：如何从图像输入中获取x和y坐标？

<form id="MapForm" action="#"> 
    <input type="image" src="usa.jpg" id="usa_map" alt="USA"/> 
</form>

我要附加一个函数，这样我可以得到X & Y坐标，当一个人点击：

$('#MapForm').submit(ClickOnMap); 
function ClickOnMap(data) 
{ 
    return false; 
}

我不能'data'中找到X & Y坐标。我究竟做错了什么？

来源

2010-02-13 Robert

有一个很好的教程在这个位置，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(); 
});

来源

2010-02-13 22:47:14

链接已过时。它移动了吗？ – 4castle 2016-04-19 02:15:50

处理函数（“Event”对象）的参数具有“pageX”和“pageY”值。用这些数据和你的img元素的“position（）”或“offset（）”做数学运算（以较好的为准;我发现在任何给定的情况下，预测这两者中的哪一个会起作用是非常混乱的）。

换句话说，img元素的“position（）”给出了“top”和“left”值。从“pageY”和“pageX”中减去它们，并且在图像本身内相对于其左上角的位置。

我不确定我明白你为什么要绑定“提交”事件 - 是“提交”按钮内的图像还是什么？

来源

2010-02-13 22:02:33 Pointy

我的理解是，图像输入取代了提交输入。因此点击图像与点击提交按钮具有相同的操作。 – Robert 2010-02-13 22:06:18

呃......你可以发布你的HTML吗？这听起来很腥。你在哪里遇到过这个建议？ – Pointy 2010-02-13 22:21:00

噢duhhhh - 你DID发布你的HTML :-)对不起。无论如何，设置的方式不会导致表单提交发生。然而，您可以将“点击”处理程序附加到图像上，然后使用它在表单上调用“提交”。 – Pointy 2010-02-13 22:44:43

你不能得到x和y值，因为submit形式submition之前执行。

从jQuery API：

...提交事件时发送到用户试图提交表单元素...

...这发生在实际之前提交...

来源

2010-02-13 23:09:32 jerone

如何从图像输入中获取x和y坐标？

回答

相关问题