Jquery 浏览器应用程序，检测用户在图像上单击的位置

我正在寻找开发一个网络应用程序，显示一个图像给用户，并允许他们点击图像的某些部分，当他们这样做时，它会做一个http张贴到一些脚本。帖子基本上会发送到用户点击图片的地方

更多信息 例如：将有一个建筑物的鸟瞰图。大楼周围都是长凳，用户可以点击任何长凳，当他们点击时，会发布他们点击的长凳

有没有人能告诉我，他们是如何使用最新的web层技术实现这一点的，我可能会使用什么libs，也许是一些伪代码。我不想用闪光灯

提前谢谢

p、 s：我尝试了Todds解决方案（见下文），这看起来是我前进的方向，但是我永远无法从POST变量中获得myImage.x显示Echo的结果

html/表格

<form action="test1.php" method="post">
   <input type="image" src="aws.gif" name="myImage" />
</form>

php脚本

<?php 
print("The value is: ");
echo $_POST["myImage.x"];
?>

---

JQuery应该足够好了。 下面的limilarTo代码应该可以满足您的需要（在坐标计算中可能只需要很少的工作）

---

任何jQuery事件处理程序都可以使用本机DOM事件，因此对于任何鼠标事件，都可以获得鼠标的位置，例如

$(function() {
    $("#myElement").click(function(e) {
        var x = e.pageX - $(this).offset().left;
        var y = e.Pagey - $(this).offset().top;

        // Call your ajax script, passing the above variables.
    });
});

---

我可以想象两种情况：

1.使用图像映射，请参阅html文档上的标记 更多信息请访问实际上，只要一个

标签就可以满足您的要求。当用户单击图像输入标记时，它将以elementName.x和elementName.y（elementName是图像的名称属性）的格式将坐标与表单数据一起发送回。例如：

<form action="someUrl" method="post">
   <input type="image" src="foo.jpg" name="myImage" />
</form>

当他们单击图像时，您的表单数据将包含与他们单击图像的位置相对应的myImage.x和myImage.y。这很简单，但你必须弄清楚什么样的像素范围对应于什么样的工作台。您也可以使用图像映射，在其中定义用户可以单击的区域，然后使用javascript将相应的表单数据发送回，如下所示：

<form name="myform" action="someUrl" method="post">
   <img src="foo.jpg" width="700" height="800" border="0" usemap="#Map">
   <map name="Map">
      <area shape="rect" coords="213,46,290,104" alt="test" onClick="myform.submit();" nohref>
   </map>
</form>

---

Hi，我尝试了以下方法：在我的php文件中，我不是php专家，因此不确定问题是否出在您的php代码上，但我尝试在这里进行快速演示，效果如预期（您将在结果窗格中看到myImage.x和.y以及所有其他标题。也许可以尝试指向您要提交的表单作为测试，以查看您的浏览器是否正确发送了请求参数。如果是，则与您的PHP脚本有关。

$('#image').click(function (e) {
  alert(e.pageX + '/' + e.pageY);
}

<form action="someUrl" method="post">
   <input type="image" src="foo.jpg" name="myImage" />
</form>

<form name="myform" action="someUrl" method="post">
   <img src="foo.jpg" width="700" height="800" border="0" usemap="#Map">
   <map name="Map">
      <area shape="rect" coords="213,46,290,104" alt="test" onClick="myform.submit();" nohref>
   </map>
</form>