dynamically generate map area coords from clicks over an image (jquery or javascript)

Question

I wondered if there is a way to generate map area coords dynamically by clicking certain parts of an image. This is in order to generate a full image map.

As an example, I have this image:

View image by clicking here...

and by clicking on it, I want to generate coordinates for each defined area, outputing something like this:

<input type="text" name="36" value="25,11,25,117,47,117,46,29,83,31,84,8" />
<input type="text" name="37" value="83,12,103,32" />

etc...

Then I will save this on database for later use and processing.

I want to do something similar to what this website does, but more simple. I just need to maintain the functionality of displaying of the lines while drawing for the user to see what he is doing, and, off course, retrieve the coords.

Online Image Map Editor

Is there any jquery plugin that already does this job or how can I accomplish this by using jquery or javascript.

Thank you in adavnce

Answer 1

Check out the ImageMapster jQuery plugin: http://www.outsharked.com/imagemapster/default.aspx?demos.html