Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS rollover circle segments

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #40559
    wrenners
    Member

    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

    #113118
    Paulie_D
    Member

    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.

    #113119
    wrenners
    Member

    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

    #113120
    Paulie_D
    Member

    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/

    #113121
    wrenners
    Member

    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

    #113122
    Paulie_D
    Member

    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.

    #113124
    wrenners
    Member

    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

    #113125
    AntonNiklasson
    Participant

    I would recommend using the canvas element for this.

    #113128
    Paulie_D
    Member

    …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)
  • The forum ‘CSS’ is closed to new topics and replies.