Page 1 of 1
Image Marking Script
Posted: Sat Dec 10, 2005 6:07 pm
by seodevhead
Hey guys, I have a very popular paintball website where users can post what's called 'paintball reports'. They type-in which state and location they had a game at and they give details on the game, results, etc. I want to provide aerial images (which I already have) of the popular paintball outdoor courses and allow the visitor to click on the aerial image of their course and add little 'markers' showing where "kills" were made during the game.
Does anyone know how this can be done? The paintball reports system is in php/mysql. I just have no idea how I would go about making something like this interactive. Any advice would be greatly appreciated!!! Take care.
Posted: Sat Dec 10, 2005 7:11 pm
by trukfixer
you can do it with javascript and an image map, submitting x,y co-ordinates for each point and then use GD to write whatever (color coded dots?) into a copy of the image.. javascript would note the click points into an array on the image map, and the submit button would send the data .. or if you wanted , you can also do it the more complex way, and just use teh image as a big submit button (using an image as a submit button, you will receive an x,y co-ordinate for the click) I can think of several ways to do it... but I'd say the first one would be optimal
Posted: Sun Dec 11, 2005 5:21 am
by onion2k
Using an image submit button is considerably simpler..
The form:
Code: Select all
<form action="index.php" method="POST">
<input type="image" name="pbm" src="paintballmap.jpg">
</form>
When a user clicks a point on the map it'll submit the form with pbm_x and pbm_y coordinates. You would put these into a database.
To display the map you'd use <img src="paintballmap.php"> .. paintballmap.php would consist of..
Code: Select all
//Stuff to get the x and y coordinates from the database as $result.
$i = imagecreatefromjpeg("paintballmap.jpg");
$color = imagecolorallocate($i,255,0,0);
while ($record = mysql_fetch_object($result)) {
imagefilledellipse($i,$record->x,$record->y,4,4,$color);
}
header("Content-type: image/jpeg");
imagejpeg($i);
imagedestroy($i);
Obviously that would be a very basic map with just red dots all over it. It's pretty easy to take it further though, with names, or a key, or different colour dots..
If you look here:
http://www.ooer.com/photowall/viewmap.php?map=london .. you'll see a similar system I wrote to generate a map of where users of a different forum are located.
Posted: Tue Dec 13, 2005 8:06 am
by seodevhead
oh man!! That is great onion2k! Thank you so much... I just have one more question for you...
How do I go about allowing the same visitor to select multiple points at once?
Thanks!!

Posted: Tue Dec 13, 2005 8:11 am
by onion2k
seodevhead wrote:How do I go about allowing the same visitor to select multiple points at once?
At once .. can't be done in standard HTML.
If I were doing it I'd just give them a form with the image submit button and a proper submit button. When they click the image it submits, adds a location saved in their session or a temporary table, and gives them the form again .. when they click the proper submit button it saves everything to the database.