Приложение для браузера, определяющее, где пользователь нажимает на изображение

Question

Я ищу разработку веб-приложения, которое отображает изображение для пользователя и позволяет ему нажимать на определенные части изображения, когда они это сделают, они отправят http-сообщение в некоторый скрипт.Сообщение будет в основном отправлено туда, где пользователь нажимает на изображение.

Подробнее Например: изображение здания будет с высоты птичьего полета.Здание окружено скамейками, пользователь может щелкнуть по любой скамье, и когда они это сделают, она опубликует, на какой скамье они нажали.

Может кто-нибудь показать мне, как они могут достичь этого, используя новейшие технологии веб-слоев, чтоlibs, я мог бы использовать, возможно, некоторый псевдокод.Я не хочу использовать вспышку.

Заранее спасибо.

ps: я пробовал решения Todds (см. Ниже), которые выглядят для меня как путь вперед, однако я так и не смог получить результатmyImage.x для вывода на экран из переменной POST

html / form

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

php script

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

Answer 1

На самом деле, просто тег <input type="image"> будет делать то, что вы просите. Когда пользователь нажимает на тег ввода изображения, он отправляет координаты обратно с данными формы в формате 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>

Answer 2

Собственное событие 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 3

JQuery должен быть достаточно хорошим. Что-то похожее: нижеприведенный код должен делать то, что вам нужно (возможно, для вычисления координат требуется немного работы).

   $("#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 4

Я могу представить два сценария:

1.используйте карты изображений, см. тег

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