浏览器应用，检测用户点击图片的位置

Question

我希望开发一个向用户显示图像的网络应用程序，并允许他们点击图像的某些部分，当他们这样做时，它会对某些脚本执行http发布。该帖子基本上会发送用户点击图片的位置。

更多信息 例如：会有建筑物的鸟瞰图像。该建筑被长凳包围，用户可以点击任何工作台，当他们这样做时，它将张贴他们点击的工作台。

有人可以告诉我他们如何使用最新的网络层技术实现这一目标，我可能会使用哪些库，也许是一些伪代码。我不想使用闪光灯。

提前致谢。

p.s：我尝试了Todds解决方案（见下文），这对我来说是前进的方式，但是我永远无法从POST变量中获取myImage.x的结果到displayecho

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"];
?>

Answer 1

实际上，只需一个<input type="image">代码即可完成您的要求。当用户单击图像输入标记时，它将使用elementName.x和elementName.y格式的表单数据发回坐标（elementName是图像的name属性）。例如：

<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>

Answer 2

JQuery应该足够好了。 类似的东西下面的代码应该做你需要的（在coord计算中可能需要很少的工作）。

   $("#myImage").click(function(e){
            var x = e.pageX - $(this).offset().left;
            var y = e.pageY - $(this).offset().top;
            var url = $(this).attr("href");
            dataUrl = url + '&x=' + x + '&y=' + y;
          $.ajax({
            type:"GET",
            url: dataUrl,
            });
       }); 

Answer 3

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

$(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.
    });
});

Answer 4

我可以想象两种情况：

1。使用图片地图，请参阅＆lt; map＆gt;在html文档上标记

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

2。访问点击的位置并检测它是否在“工作台”上。使用jQuery之类的东西：

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

http://api.jquery.com/category/events/event-object/

的更多信息