: How to make Illustrator slice coordinates match HTML coordinates? 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

@Bethany839

Posted in: #AdobeIllustrator #Html #WebsiteDesign

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.

Vote Up Vote Down

Login to post a comment!