Question

I’m making a CSS iPod (first generation). I have managed to get the layout right, including the click wheel and the 4 buttons (menu, play/pause, prev, next).
But these buttons are not rectangular. However HTML elements are rectangular. So if the user clicks the ‘menu’ button, the click wheel will ge the one which receives the click.
How can I accurately get the user’s intended click?

Also how can I detect the scrolling of the click wheel?

Here is my iPod.
http://inventikasolutions.com/demo/iPod

Answer 1

You can create polygonal hotspot using the tag ( see http://www.w3schools.com/tags/tag_area.asp ) to know when specific areas are clicked. Other solutions involve using a color-map in a canvas and sampling the color at the same location to decide what action to take.

For the scrolling, you’ll want to calculate the angle at which the pointer is at relative to the centre of the wheel when the mousedown is first fired, and keep calculating the change in angle as mousemove is repeatedly fired as the pointer is dragged. Then you can evaluate the difference in angles to know a scroll has happened and how fast.