Hello everybody,
I am to create web application where you define clickable parts of image (for the beginning lets talk just about rectangular - first click = left upper corner, second click = right down corner - after i am supposed to make circle or just a small point).
My question is how to get relative (to an image) coordinates of clicked points into variables x and y ?

BTW - my tool should be able to upload picture and define clickable areas of optional shape (rectangular, circle, point). I am not quite sure if javascript is for that purpose the best one (PHP or Java is mabey better?), but I would like to use Javascript the most i can.
thanks in advance Tad

11-11-2012, 01:57 PM

Sup3rkirby

This is certainly possible in JavaScript. PHP is a server-side language so it wouldn't give you any active functionality on a page and Java, while typically is installed does of course require it to be present and enabled for that browser.

If you have the image displayed on the page as an element you will simply want to have an onclick event fire for that element with something similar to what I have below:

I haven't tested this yet though so it may not be perfect. It's basically just a rough draft though. It will return an array containing the x and y values for where the cursor is located relative to the image itself. Obviously with this setup you wouldn't see anything. I don't know what part of your code needs those values so you would want to adjust it so those returned values get sent there instead.