: Best way to slice up a non rectangular image? 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
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:
More posts by @Reiling115
2 Comments
Sorted by latest first Latest Oldest Best
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.