Question

Problem:

I’m working on a website where there is a “dial” that displays a number of tabs representing different divisions of an umbrella company:

At the moment I have everything prepared in HTML/CSS (positioning of each of the tabs). The inner circles are on a higher z-index as the tabs will need to animate outward when rolled over (I can achieve this part). The images for the tabs actually look like this:

Unfortunately it didn’t occur to me until now that because of the mechanics of rollover and rollout in JavaScript, the boundaries for each item are square, meaning they overlap all over the place. For example, the centre circle’s rollover area is actually this:

Which detracts some massive clickable/rolloverable areas on the inner circle of tabs. This effect then stacks with each of the tabs, rendering a standard approach non-viable.

---

Approach:

This is fine, what I plan to do now is measure the distance and angle of the mouse from the centre of the dial and use these values to determine the relevant tab, and work from there. I’ll basically do the following:

1. Collect angle (using atan2) and distance (using pythag).
2. Apply my .click() to the entire dial, and work with these values from there.
3. Use setInterval() to constantly check which item is rolled over and work with its animation from there.

---

Question:

I’m not exactly sure how to implement what I am doing (with JQuery). I know how to do all the Math stuff once I have the coordinates that I need, I’m just not confident in getting the actual coordinates (ensuring the same results cross-browser).

How can I best gather the coordinates of:

1. The centre of my dial.
2. The cursor (assuming that the cursor is within the same axis as the centre of my dial i.e. rolling over the centre of the dial will mean both sets of coordiantes are the same).

---

Note:

Taking the above, anything that achieves the same result (being able to have proper rollover detection for overlapping elements) is equally as helpful.

Answer 1

You can define an image map over the stack of layers. The map will define clicking/hovering regions, and the browser will take care of hit detection. With Adobe ImageReady, I have mapped a portion of your reference image so that “Reprise” and “Initiative” are hotspots:

ImageReady produced the following HTML:

<img src="images/Imagemap.png" width="488" height="488" border="0" alt="" usemap="#Imagemap_Map">
<map name="Imagemap_Map">
    <area shape="poly" alt="" coords="82,336, 138,303, 130,287, 123,265, 120,238, 125,206, 136,179, 158,152, 178,136, 209,122, 244,117, 244,55, 215,60, 184,67, 158,77, 122,101, 97,130, 73,169, 62,202, 59,224, 58,253, 61,281, 73,318" href="#">
    <area shape="poly" alt="" coords="73,72, 112,111, 138,89, 161,76, 187,66, 214,59, 244,57, 244,0, 205,4, 165,12, 118,34, 94,51" href="#">
</map>

(As you can see, mapping arbitrary regions can be exausting, and I dare to say virtually impossible without the use of a tool.)

You’d apply the map to a transparent image on top of everything. The final assembly can be imagined as the following stack:

The regions were highlighted just for reference. The real composition should be 100% transparent.

Good luck!