Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
up vote 1 down vote accepted

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

It's called AI-2-HTMLMap.

share|improve this answer
Great ! That is what i am looking for and it work for me. Thanks so much – Ryan Sep 23 '13 at 10:07

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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