Custom datatype - get clicked image co-ords - how?
Having never built a custom datatype before, I need to create something to save the co-ordinates of a mouse click on a static image. The image will always be the same. I just need to get the x/y pixel co-ordinates that are clicked. It could be as simple as having the image displayed, a textbox beneath, and a javascript routine to insert the values x,y into the textbox, the contents of which are then saved.
Custom datatype - get clicked image co-ords - how?
Having never built a custom datatype before, I need to create something to save the co-ordinates of a mouse click on a static image. The image will always be the same. I just need to get the x/y pixel co-ordinates that are clicked. It could be as simple as having the image displayed, a textbox beneath, and a javascript routine to insert the values x,y into the textbox, the contents of which are then saved.
What would be the simplest way of achieving this?
Hi Tom,
Given this will be your first custom data-type, initial advice is small steps - and be free to ask any questions!
Tim Geyssens has a good presentation called "Master of DataTypes" ... with a follow-up blog post on "UserControlWrapper and storing parseable xml data". (This depends on whether you'd like to store the data/value as XML or comma-separated?)
With the editor UI, see what others have done for this ... a quick Google search (for "jquery image co-ordinates") found this: getting the X/Y coordinates of a mouse click on an image with jQuery, demo here.
Cheers, Lee.
Hi Tom,
Curious, did you ever get a solution for this? As funnily enough, I need the similar functionality on my current project.
Thanks, Lee.
is working on a reply...