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.
