If you can point me to a solution that exists for this, that would be good. If you can implement one, I'd love to learn from it, tweak it, integrate it...thanks!
SPEC. IN A NUTSHELL
A PHP page which lets a user overlay text labels on a picture. The picture's filename*, text and the X,Y coordinates for the position of the labels are then stored in MySQL.
This information can then be recalled from MySQL to regenerate the labeled picture. This is done by showing the picture file in the browser and overlying it with text at the X,Y coordinates stored.
Would prefer this to work in both IE7+ and FF2+
* please note: I don't want to store the picture file itself in MySQL, just the name for it for later reference for rendering the webpage.
SPEC. IN A STORY
1) User opens labeler.php in their browser.
2) labeler.php pulls up label_me.jpg and renders a "Submit" button underneath this.
3) Whenever user clicks on label_me.jpg, a cursor (or textbox) appears at that position to allow them to type text which overlays label_me.jpg - user can continue to do this until they get bored of putting text over the picture.
4) User clicks on "Submit" button. The page then saves each text entry as well as its X,Y coordinates to a MySQL database (this Database also stores other information aside from what's in this example).
5) User goes to a page which lists all the records in the said MySQL database as a table. Each row in the table also contains a link to each labeled picture associated with a record if that record has one.
6) Clicking on the link sends user to show_me.php which renders label_me.jpg with the overlying text(s) previously entered at their saved X,Y coordinates.
Thanks for reading this far. Looking forward to seeing what elegant solutions people come up with!