Comment mieux implémenter les événements de rollover et de rollout pour plusieurs éléments qui se chevauchent?

Problème:

Je travaille sur un site Web sur lequel un “cadran” affiche plusieurs tabs représentant différentes divisions d’une société faîtière:

entrez la description de l'image ici

Pour le moment j’ai tout préparé en HTML / CSS (positionnement de chacun des tabs). Les cercles intérieurs se trouvent sur un z-index supérieur, car les tabs devront s’animer vers l’extérieur lorsqu’ils sont survolés (je peux réaliser cette partie). Les images des tabs ressemblent à ceci:

entrez la description de l'image ici

Malheureusement, je ne me suis pas rendu compte jusqu’à présent qu’en raison de la mécanique du basculement et du déploiement en JavaScript, les limites de chaque élément sont carrées, ce qui signifie qu’elles se chevauchent un peu partout. Par exemple, la zone de survol du cercle central est en fait la suivante:

entrez la description de l'image ici

Ce qui nuit à certaines zones massives cliquables / basculables sur le cercle intérieur des tabs. Cet effet se cumule ensuite avec chacun des tabs, rendant une approche standard non viable.


Approche:

C’est très bien. Ce que je compte faire maintenant, c’est mesurer la distance et l’angle de la souris par rapport au centre du cadran et utiliser ces valeurs pour déterminer l’onglet approprié, puis travailler à partir de là. Je vais essentiellement faire ce qui suit:

  1. Recueillir l’ angle (en utilisant atan2) et la distance (en utilisant pythag).
  2. Appliquez mon .click() à l’ensemble du cadran et .click() ces valeurs à partir de là.
  3. Utilisez setInterval() pour vérifier en permanence quel élément est survolé et utiliser l’animation à partir de là.

Question:

Je ne sais pas exactement comment mettre en œuvre ce que je fais (avec JQuery). Je sais comment faire tout ce qui concerne les Math une fois que j’ai les coordonnées dont j’ai besoin, je ne suis tout simplement pas confiant pour obtenir les coordonnées réelles (assurer les mêmes résultats sur plusieurs navigateurs).

Comment puis-je rassembler au mieux les coordonnées de:

  1. Le centre de mon cadran.
  2. Le curseur (en supposant que le curseur se trouve dans le même axe que le centre de mon cadran, c.-à-d. Que vous passez sur le centre du cadran signifiera que les deux ensembles de coordonnées sont identiques).

Remarque:

En prenant ce qui précède, tout ce qui aboutit au même résultat (pouvoir détecter correctement le basculement pour les éléments qui se chevauchent) est également utile.

Vous pouvez définir une carte-image sur la stack de couches. La carte définira les zones de clic / survol et le navigateur se chargera de la détection des hits. Avec Adobe ImageReady, j’ai mappé une partie de votre image de référence de sorte que “Reprise” et “Initiative” constituent des points chauds:

entrez la description de l'image ici

ImageReady a généré le code HTML suivant:

      

(Comme vous pouvez le constater, la cartographie de régions arbitraires peut être fastidieuse et j’ose dire qu’il est pratiquement impossible sans un outil.)

Vous appliqueriez la carte à une image transparente par-dessus tout. L’assemblage final peut être imaginé comme la stack suivante:

entrez la description de l'image ici

Les régions ont été mises en évidence juste pour référence. La composition réelle doit être 100% transparente.

Bonne chance!

Pour avoir le centre:

 var dialPos = $( "#Dial" ).offset(); var center = { x: dialPos.left + $( "#Dial" ).width() / 2, y: dialPos.top + $( "#Dial" ).height() / 2 }; 

Coordonnées du curseur:

 $( "#Dial" ).mousemove(function( e ) { var x = e.pageX - center.x; var y = e.pageY - center.y; });