Discussion :

[yotta]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<p align="center"><canvas height="200" id="canvas3" width="1100"></canvas></p>
<script>experience(false,"canvas3",["1979","1983","1986","1989","1991"],1100,['https://www.bmfamilly.fr/sites/default/files/CEP_reduit_0.jpg#overlay-context=node/4','https://www.bmfamilly.fr/sites/default/files/CAPBEP_reduit.gif#overlay-context=node/4','https://www.bmfamilly.fr/sites/default/files/BAC_reduit.jpg#overlay-context=node/4','https://www.bmfamilly.fr/sites/default/files/BTS_reduit.jpg#overlay-context=node/4',''], ["Cycle primaire + collèges <br> Certificat d'études","Lycée technique de Schirmeck <br> C.A.P.+B.E.P. Electromécanique","Lycée Couffignale Strasbourg <br> Baccalauréat F3","Lycée Théodore-Deck Guebwiller B.T.S. F3"]);</script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function experience(etat, destination, dates, largeur, logos, legendes)  {
    var canvas2 = document.getElementById(destination);//destination vaut "canvas3".
    ...
    ...
    canvas2.addEventListener('mousedown', clickSurImage);
    canvas2.addEventListener('mousemove', survolLogo);

Voici le code des fonctions clickSurImage et survolLogo :

clickSurImage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var clickSurImage = function(evt) {
    // C'est ici qu'il faut écrire le code de prise en charge des évènements de clic de la souris sur le canvas.
    // On sollicite colorbox pour afficher l'image en grand.
    var coordonnees = windowToCanvas(canvas2, evt.clientX, evt.clientY);
    var calculPosX;
    var urlImage;
    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)) {
                urlImage = ImagesLogos[i].src.substring(0,ImagesLogos[i].src.indexOf("_")) + "_HD.jpg";// ImagesLogos est un Array d'objets Image construit lors de l'exécution du script.
                }
            }
        }
    var img = new Image();          
    img.src=urlImage;
    img.onload = function() {
        var hauteurImage  = img.height; 
        var largeurImage  = img.width;
        jQuery.colorbox({html:"<img src='"+urlImage+"' width='" + largeurImage  + "' height = '" + hauteurImage  + "'/>", opacity:0.65});
        }
    }

survolLogo

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var 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;
    }

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.
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.

[yotta]

Oui, merci à ceux qui se seront penchés sur mon problème. Je viens de le résoudre, et ce n'était pas un problème de javascript, mais un problème css.
En effet, ne définissant initialement aucune règle CSS concernant le curseur à associer à mon élément canvas, je penses que le javascript tombe sur un null lorsqu'il tente d'accéder à la propriété style.cursor.
Utilisant Drupal, j'ai alors édité la règle css en place pour mes éléments canvas et j'ai ajouté la définition css du curseur à associer sur la valeur 'auto' pour maintenir un curseur normal initialement.
Dés la mise en place de cette définition css, le code fonctionne, et je vois bien le curseur se changer en main lors du survol d'une image de diplôme. De plus, je me suis rendu compte que la valeur doit être 'pointer' pour une main, et non 'hand' comme je tentais de le faire jusqu'alors.
Merci.