Question

I am looking to develop a web-app that displays an image to the user and allows them to click on certain parts of the image, when they do it will do a http post to some script. The post will basically send where the user clicks on the image.

More Info
For example: there would be a birds eye view image of a building. The building is surrounded by benches, the user can click on any bench and when they do it will post which bench they clicked on.

Could somebody show me how they might achieve this using the latest web layer technologies, what libs I might use, some pseudo-code perhaps. I DO NOT want to use flash.

Thanks in advance.

p.s: I tried Todds solutions (see below) which looks like the way forward for me, however I can never get the result of myImage.x to displayecho out of the POST variable

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

Actually, just an <input type="image"> tag will do what you’re asking. When a user clicks on an image input tag, it will send the coordinates back in with the form data in the format of elementName.x and elementName.y (elementName being the name attribute of the image). For example:

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

When they click on the image, your form data will contain myImage.x and myImage.y corresponding to where they clicked the image. It’s as easy as that, but you’ll have to figure out what range of pixels correspond to what bench. You could alternatively use an image map, in which you define the areas that a user can click on and then using javascript have it send back the appropriate form data like this:

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