Hi,
So Im making a very simple map of New Zealand, and I want to split it into regions. When you mouse over each region, it highlights, and when you click it, it goes to a new URL.
The problem is, Each region is not a square or rectangle, and if I made each region a PNG, the transparent parts of the PNG would overlap with each other, and screw up the hover states etc. I’ve also tried this with SVGs from illustrator
Is there a way to do this?
Ta
Interestingly css clipping-paths seem to work at least in Safari and Chrome…
Have a look at https://css-tricks.com/clipping-masking-css/
And there is a tool which may help you work the paths out.
http://bennettfeely.com/clippy/
In my simple test the clipping path hid the outside of the shape and also restricted the mouse clicking to the inside.
Ion doing so it also allowed for them to be side by side and not cross over when rendered in the browser even if the clipping path elements are in the project.