- This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
Viewing 9 posts - 1 through 9 (of 9 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I have a circle which I have divided into 5 segments like a pie graph. I would like each segment to change colour when I rollover it.
Can anyone give me some pointers on how to do this and whether there might be any compatibility issues.
Thanks,
Andrew
What code do you have so far?
What is supposed to happen on a click…is this some sort of menu?
To start with all HTML elements are rectangular so I can see a number of issues already.
I’m only at concept stage at the moment so no code yet.
My first thought was to try masking each segment somehow.
I’d like to be able to click on each segment to link to another page but can downsize my ambitions if this is problematic!
The site will be for 5 churches and I want to colour code each church.
Thanks,
Andrew
It’s doable but there would be a heck of a lot of CSS3 stuff going on and browser support would not be very deep.
http://www.kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/
Brilliant thanks, I suspect that my target audience may not have the most up to date browsers for this then!
I have also had a look into HTML image maps and animated gifs but I’m not sure if this is advisable.
Thanks for taking time to find the link,
Andrew
If it was 4 segments / pieces it would be a lot easier to implement but CSS can only cope (at the moment with) 90 & 45 degree angles for elements & borders.
At the moment I’m having trouble seeing any way to implement this with any half decent browser support.
Yes, I see what you mean about the 4 pieces.
I will see how I go and let you know if I find a solution. If not then it’s not a deal breaker.
Thank you,
Andrew
I would recommend using the canvas element for this.
…but canvas is probably less well supported than the other CSS3 items in the suggested target browsers.