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
Tuff one
Moderators: macek, egami, gesf
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
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:
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.
if you have some html on your form, like this:
Code: Select all
<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.
good
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..
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.
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: Select all
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'll now try to get working on displaying the crosshar gif at the right place :S being a newb sucks !! :S
Return to “PHP coding => General”
Who is online
Users browsing this forum: No registered users and 8 guests