CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Craig Innes
Craig Innes

Reputation: 1573

Hovering over different segments in a circle

I am currently trying to create a blue, circular, pie-chart-esque image for my website. The circle will be split into 6 different segments.

What I want to happen is that when the user hovers over a particular segment, this segment will turn orange, and some text will appear beside the circle corresponding to that segment.

I have found some resources online which achieve nearly the effect I need using CSS image maps. http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/ However, these techniques split up an image using rectangles. If I were splitting up a circular object I would prefer to split up the area based on particular arcs.

I assume this is beyond the reach of pure HTML and CSS. I do not have a great deal of experience with web languages, although I have had passing experience with JQuery. What are the techniques I need to solve my problem and what technology would be best to implement it?

Upvotes: 2

Views: 1736

Answers (3)

John Lawrence
John Lawrence

Reputation: 2923

I have a solution for this using mainly HTML and CSS with a tiny bit of jQuery to handle the showing of the text by the side of the circle.

It does however use some CSS properties that are not very widely supported such as pointer-events

JSFiddle Demo

Upvotes: 0

Matt Coughlin
Matt Coughlin

Reputation: 18906

A few options:

HTML image map

It's simple to create an HTML image map that comes very close to the shape of each slice of the circle, but there are limitations to HTML images maps. For instance, you can't nest content inside each slice of the image map (as an easy way to implement a hover pop-up). If an HTML image map is adequate for you, it's the simplest solution.

CSS image map

To define circle-slice shapes, a CSS image map is impractical, unless you only need a very-rough approximation of the hotspots for each circle slice. But if you could live with that, you'd have a lot more flexibility as far as the functionality.

onmousemove

You could also get the mouse coordinates with an onmousemove event handler for the entire circle, and then do your own calculations to determine which circle slice the mouse is in. This allows you to accurately define the hotspots for each circle slice, and you'd have more flexibility than with an HTML image map. But the calculations may take a little work.

Upvotes: 1

Luca
Luca

Reputation: 9715

you can create image maps that are not rectangular, but use polygon shapes.

this useful tool http://www.image-maps.com/ will let you achieve what you are looking for, without having to write your own polygon mapping!

Upvotes: 3

Related Questions