ImageMapster, demo, example

Question

I found this ImageMapster

I want to rebuild the code similar to the USA MAP Demo

I don't understand how to define the areas?

I found this, but I don't understand the source code:

How can I get the coords? Which program offers me these functions? JSFiddle

coords="259,256,275,257,298,258,296,275,296,288,296,289,299,292,301,293,302,293,302,291,303,293,305,293,305,291,307,293,306,295,309,296,311,296,314,296,316,298,317,296,320,297,322,299,323,299,323,301,324,302,326,300,327,300,329,300,329,302,333,304,334,303,335,300,336,300,337,302,340,302,343,303,345,304,347,303,347,301,350,301,351,302,353,300,354,300,355,302,358,302,359,300,360,300,362,302,364,304,366,304,368,305,370,307,372,305,374,306,374,314,374,321,375,329,376,331,377,334,378,338,381,341,381,344,382,344,381,350,379,354,380,356,380,358,380,363,378,365,379,368,374,369,367,372,366,374,364,375,362,376,362,377,358,380,356,382,352,385,347,386,343,389,342,390,338,392,335,393,332,397,329,397,329,398,330,400,329,404,329,407,328,410,327,413,328,415,329,420,329,425,331,426,330,428,328,429,324,426,320,425,319,425,317,425,314,423,310,422,304,419,302,417,302,412,299,411,299,409,299,409,299,406,299,406,298,405,299,402,298,400,296,399,293,396,290,392,287,389,287,388,284,379,283,376,282,374,282,374,278,370,275,368,275,367,274,365,269,365,263,364,261,362,258,364,255,365,254,367,253,370,250,374,248,376,246,375,245,374,243,374,241,372,241,372,239,371,236,369,230,363,229,360,229,354,227,350,226,347,224,347,224,345,221,344,219,342,214,337,213,335,210,332,209,329,207,327,206,327,205,323,211,324,232,326,253,327,254,310,257,270,259,256,260,256">

<area href="#" state="NH" full="New Hampshire" shape="rect" coords="512,29,586,44">
<area href="#" state="VT" full="Vermont" shape="rect" coords="543,49,586,62">
<area href="#" state="MA" full="Massachusetts" shape="rect" coords="515,68,585,80">
<area href="#" state="RI" full="Rhode Island" shape="rect" coords="650,149,711,161">
<area href="#" state="CT" full="Connecticut" shape="rect" coords="655,167,711,179">
<area href="#" state="NJ" full="New Jersey" shape="rect" coords="656,185,711,198">
<area href="#" state="DE" full="Delaware" shape="rect" coords="665,204,711,216">
<area href="#" state="MD" full="Maryland" shape="rect" coords="667,223,711,235">
<area href="#" state="DC" full="District of Columbia" shape="rect" coords="654,239,711,252">
<area href="#" state="WV" full="West Virginia" shape="rect" coords="649,257,711,270">
<area href="#" state="SC" full="South Carolina" shape="poly" coords="551,314,551,314,548,314,548,312,547,310,545,308,544,308,542,304,540,299,537,299,536,297,535,295,533,293,532,293,530,290,528,289,524,287,524,287,523,284,522,284,520,280,518,280,515,278,513,277,513,276,5

and so on..

Ahh you have to define all pixels, right? Which programm would you advise?

Answer 1

there are lots of programs, which can generate image maps. For example quantum gis (with the html imagemap plugin) (http://www.qgis.org) can export imagemaps at no cost. If your imagemaps are floor plans, artistic drawings etc give mapedit a try (http://www.boutell.com/mapedit/) for ~15$.

Answer 2

Look here under "How do I make image maps":

http://www.outsharked.com/imagemapster/default.aspx?faq.html

This is the easiest way I know of:

http://www.image-mapper.com/

There are lots of image maps already made of common things like geographic maps which you can easily find with google.