Grow your CSS skills. Land your dream job.

rollover circle segments

  • # November 1, 2012 at 12:33 pm

    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

    # November 1, 2012 at 12:41 pm

    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.

    # November 1, 2012 at 12:50 pm

    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

    # November 1, 2012 at 1:00 pm

    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/

    # November 1, 2012 at 1:13 pm

    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

    # November 1, 2012 at 1:19 pm

    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.

    # November 1, 2012 at 1:37 pm

    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

    # November 1, 2012 at 1:43 pm

    I would recommend using the canvas element for this.

    # November 1, 2012 at 3:33 pm

    …but canvas is probably less well supported than the other CSS3 items in the suggested target browsers.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".