Bonjour,
Je rencontre une difficulté pour modifier l'aspect du pointeur de la souris au survol d'une image dessinée dans un canvas.
Pour comprendre au mieux ce que je cherche à faire, vous pouvez visiter mon CV numérique, une page web en ligne diffusée via le CMS Drupal à l'adresse suivante : Lien
Cette page contient en l'occurence le script 'experience.js' qui fait l'objet de mon interrogation et dont vous trouverez ci-dessous les extraits utile pour m'aider à surmonter ce problème et présente mon CV numérique au bas duquel vous trouverez mon parcour scolaire. Ce dernier est représenté dans le canvas traité par le code ci-dessous, et pour lequel j'aimerai modifier l'aspect du pointeur en une main lorsque l'on survol un diplôme.
J'utilise un canvas identifié "canvas3" dans mon code html. Dans mon javascript nommé "experience.js", j'ajoute l'écoute des événements suivants à l'object canvas2 tel que :
Partie HTML :
Code:
2
Voici le code des fonctions clickSurImage et survolLogo :Code:
2
3
4
5
6
7
clickSurImage
survolLogoCode:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Dans survolLogo, les lignes rouge représentent les différentes méthodes de changement du curseur que j'ai essayé. Elles sont rouge parce qu'elles ne sont pas présentent toutes les deux en même temps dans le code final.Code:
2
3
4
5
6
7
8
9
10
11
12
13
14var survolLogo = function(evt) { var curseur = 'auto'; var coordonnees = windowToCanvas(canvas2, evt.clientX, evt.clientY); var calculPosX; // Maintenant, à partir de l'objet coordonnees, il faut déterminer si l'on se trouve au dessus d'une image pour modifier le pointeur de la souris... for (var i = 0 ; i < positions.length ; i++) { calculPosX = positions[i] + Math.round((positions[i+1]-positions[i])/2) - Math.round(100/2); if ((coordonnees.y <= (yb + 70)) && (coordonnees.y >= yb)) { if ((coordonnees.x >= calculPosX) && (coordonnees.x <= calculPosX + 100)) curseur = 'hand'; } } document.querySelector("#canvas3").style.cursor=curseur; document.getElementById("canvas3").style.cursor=curseur; }
Au final, tout semble fonctionner, en tout cas pour ce qui concerne la détection du passage de la souris au-dessus d'une des images contenues dans le canvas et son affichage avec colorbox en haute résolution. Par contre, aucun changements de curseur au survol ???
Je me suis alors demandé si mon événement de survol était bien déclenché. Comme je ne sais pas encore débuger du javascript, j'ai fait simple. Dans le code de la fonction clickSurImage, j'ai ajouté une condition indiquée par une variable globale de type booléenne nommée flagSurvolImage qui est passée à vrai ou à faux par la fonction survolImage à la place des lignes rouges. Et j'ai pris grand soin de déclarer cette variable à false en tout début de script. Comme ça, si au survol d'une image, flagSurvolImage ne passe pas à vrai, le clic sur cette dernière est sans effet. Et ça fonctionne, lorsque je clique sur une image, elle s'affiche bien dans mon colorbox, donc, l'événement de survol a bien été détecté, alors pourquoi dans le code ci-dessus, le curseur ne change pas d'aspect puisque le code est bien exécuté ???
Merci pour votre aide précieuse.
