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 acplish this by using jquery or javascript.

Thank you in adavnce

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 acplish this by using jquery or javascript.

Thank you in adavnce

• javascript
• jquery
• image
• dictionary
• coordinates

• Have you found any solution to your problem? – Krunal Commented Jul 27, 2013 at 9:47

2 Answers 2

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

We had the same requirements. And we ended up using this jQuery plugin: http://odyniec/projects/imgareaselect/

Hope it helps.