need to divide circle image to 8 part, and put label on each part. pressing label will turn the circle to the divided part


I have a circle image (like a roulette template), and I need to split it to 8, and put label on each part. when pressing on divided part, I need the circle will point on the correct part.

this is jsfiddle of what I have in a mean time: http://jsfiddle.net/EYALIN/x8q9nqt1/

this is JS:

var img = document.querySelector('img');
img.addEventListener('click', onClick, false);


function onClick() {
    this.removeAttribute('style');

    var deg = 500 + Math.round(Math.random() * 500);

    var css = '-webkit-transform: rotate(' + deg + 'deg);';

    this.setAttribute(
        'style', css
    );
}

Answers:


What you need to do is create this image in photoshop with the dividers and then use image map to select those dividers, then use jQuery to select them. I will post an image and image map code soon.

This is an example image, you need to create it to your likings

Then we use an image map generator

And get this result:

<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="#" shape="rect" coords="506,493,510,1017" />
    <area alt="" title="" href="#" shape="poly" coords="901,833,519,496,518,503,895,839" />
    <area alt="" title="" href="#" shape="poly" coords="499,499,139,848,132,842,495,493" />
    <area alt="" title="" href="#" shape="poly" coords="492,495,12,502,13,491,493,488" />
    <area alt="" title="" href="#" shape="poly" coords="152,174,500,478,492,484,146,183" />
    <area alt="" title="" href="#" shape="poly" coords="498,21,502,473,512,474,507,20" />
    <area alt="" title="" href="#" shape="poly" coords="853,156,515,479,522,484,859,163" />
    <area alt="" title="" href="#" shape="poly" coords="1005,484,526,487,528,496,1003,494" />
</map>

Now you can use jQuery to select the different dividers and hook events to them:

$('area').each(function() {
    // do something
});