Today I have the problem to slice a map from illustrator CS6 to HTML. For example i have a map with many states like this map states

Because I want to make the mouse hover to each state so that i need the area code from HTML to identity each state.

Firstly, I export the map states picture to one image (map.png) -> upload this image to webpage.

Secondary I use the slice tool of illustrator to slice each state and then go to File -> Save for Web and click preview in browser to get the area html code

<area shape="poly" alt="" coords="275,111, 274,112, 272,113, 271,113, 271,112, 270,112, 269,112, 268,111, 267,111, 266,111, 265,111, 265,111, 265,112, 264,113, 263,114, 263,113, 261,112, 259,113, 259,113, 258,113, 256,112, 256,111, 256,110, 255,109, 255,109, 255,108, 254,108, 253,107, 252,107, 251,106,

My problem is the Area of HTML parameter after slice dose not match to the map.png file when I do the hover effect. Because I guess, illustrator slice the image but it changes the coordinate axes to one partial state 0,0 instead of keep the artboard coordinate.

So anyone can help the solution for me. Thanks for your patient to read this question. I am looking forward to your any suggestion.

1 Answer 1


There's this Illustration script you can run, it exports path items as HTML MAP Area coordinates.

It's called AI-2-HTMLMap.

  • Great ! That is what i am looking for and it work for me. Thanks so much
    – Ryan
    Commented Sep 23, 2013 at 10:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.