Tuff one

A

Anonymous

Guest
Here's what i need to do ... I have to create an online Accident form where the person clicks on a picture of the body to indicate the injury... (information can be store in a mysql database) then another person reviewing the reports could see where the injury is.

Anyone know how I could do this ?

thx
frank
 
Hi,

The easiest way is to make the picture as a whole and then cut it up or assign imagemap areas to it using something like fireworks. This will give you a multitude of images (slices) or hotspots within the imagemap.

Then assign urls to each of the images with a unique value on each:

myurl.com?id=1 etc

Then get php to evaluate the variable 'id' and assign which part of the body it is:

if($id==1){
$body_part="eyes";
}elseif($id==2){
$body_part="ears";
}

etc.

If the image is only part of the form and there are other fields to fill in alongside it you may want to look at employing Javascript to stamp the body part selected into a hidden field prior to submission of the form data. You can do this through the onClick command of the URL associated with the image.

Hadleigh
 
You could also use an 'image' type submit button.

if you have some html on your form, like this:

Code: 
<INPUT type = 'image' source = 'bodypic.gif' name = 'imgbody'>

where 'bodypic.gif' is actually the name of your picture of a body, then, when the user clicks on the image, that submits the form. The image type submit button should give you x and y location variables for where in the image the person clicked.

I would have the user click on the picture of the body, then have your form processing script retrieve the x and y coords for the click, and display a curson on top of the pic (using absolute positioning css stuff) then ask them to click the 'submit' button if the right spot is click, or click again on the pick to change the location. Once the final submit is clicked, you can store the x and y coords in your database. Then, when someone needs to view the location of the injury, you can once again use css postitioning to display a cursor (or some other image, I use a transparent gif of crosshairs) at the injury location.

this lets you do the whole thing without image mapping, client side scripting, or special software.

hope this helps.
 
Ok it helps me alot !! but how exactly do i retrieve the x:y coords and then.. how to place the crosshair on the of the other at the right coords ?
 
Okay, I haven't done image buttons in php yet, but it should be the same as in other things.

In the asp stuff I've done, the clicked x and y coordinates are returned as imagebuttonname.x and imagebuttonname.y.

I think you should be able to get each with something like this..

Code: 
if (isset($_POST['img_button_body.x'])
 
  {
  echo "x coord = " . $_POST['img_button.body.x'] . "<BR>"
  }
else
  {
  echo "No x coord returned
  }

if (isset($_POST['img_button_body.y])
 
  {
  echo "y coord = " . $_POST['img_button.body.y] . "<BR>"
  }
else
  {
  echo "No y coord returned
  }


echo "<IMG src = 'body_pic.gif' width = '320' height = '200'>"

echo "<IMG  style = 'position:absolute; left: ";
echo $_POST['img_button.body.x] ;
echo "px; top: ";
echo $_POST['img_button.body.y];
echo "' src = cursor.gif'>";

that should get you started. I haven't worked with the css style position stuff in a bit, you might want to experiment with position:absolute and position:relative. It seems to me that I had to do some stuff like subtracting the clicked coord values from the image width and height to get them to line up properly.. try experimenting and see what you get. Also, make sure you display your body image first, and then your cursor image. that way the cursor should lie 'on top' of the body. Last, I would suggest that the cursor pic be a gif with transparency.

Let me know what you come up with, and I hope this helps.
 
I tried the following line to test if the condition ever get true but it seems never to get true

if (isset($_POST['image.x'])) {

echo "test";

}
 
okay, it took some work, but I finally got this to work. The name of the x coord is imagebuttonname_x

so if your image button is name image

then the x coord is $_POST['image_x']

give it a shot, hope it helps
 
Thx that works :) i'll now try to get working on displaying the crosshar gif at the right place :S being a newb sucks !! :S

hehe anyways thanks !!
 
Hey, as soon as you get something cool working, any chance you'd post a link to the finished product? I'd love to check it out. And yes, being a newb ain't fun. The funny thing is, I'm a newb with php myself, only 2 months into it.

Have fun
 
I've started last week ! :) so evrething i do is new to me ... but when a get something working i'll try to post it somewhere
 
You must log in or register to reply here.
Back
Top