I have the image below and need to create a rollover for each piece or arrow in the circle. Because the image isn't rectangular, it boggles how me how I'm going to do this without having badly overlapping pieces. As you can see from the image below, the slices will overlap each other (quite a bit), which will not be good for the rollover.Does anybody have any ideas as to how to accomplish this without resorting to Flash or HTML5? The majority of our site's users use dinosaur browsers that don't support HTML5.Here is the image:
Best way to slice up a non rectangular image?
html;photoshop
Basically don't slice it up, create an image map with irregular hotspots for each arrow and a series of on/off images for each arrow state which you can enable using jQuery. You can see another example an image map with jQuery at work here (about as irregular as you can get).Dreamweaver has an excellent tool for creating irregular image maps (if you don't have a copy download a 30 day demo). Additionally There is a pretty decent walkthrough for creating pure CSS image maps with rollovers at n00bcube.