Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

1 Answer 1

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

 
discard

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.