Exploiter la position de la souris en Javascript

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Repérer la position de la souris en Javascript

Dans cette formation nous proposons d'apprendre les techniques du langage Javascript permettant de repérer la position du curseur de la souris en temps réel. L'objet event permet, comme son nom l'indique de gérer un certain nombre d'événements qui surviennent durant la navigation. Cet objet propose des propriétés qui renseignent sur les coordonnées précises, an abscisse et en ordonnée, du curseur de la souris, dans la fenêtre de navigation.



La capture ci-dessus illustre l'application finalisée. L'internaute choisit un département dans la liste déroulante. La miniature correspondante s'affiche alors instantanément dans le cadre de gauche, avec la représentation des départements limitrophes. Au survol de la souris sur les territoires délimités dans l'image, nous prélevons l'abscisse et l'ordonnée du curseur, pour les afficher dans le cadre inférieur (Encerclées de rouge sur la capture). Nous exploitons ces coordonnées pour afficher un calque (Div) qui suit le déplacement de la souris. Nous offrons ainsi des informations contextuelles à portée de clic. Enfin, une image du département survolé dans la partie gauche, s'affiche zoomée dans le cadre de droite.

Présentation des sources
Afin de concentrer nos travaux sur les techniques de programmation permettant de manipuler et prélever les informations sur la position du cureur, nous proposons de récupérer quelques sources.

• Télécharger le fichier position-souris-javascript.zip en cliquant sur son lien,
• Le décompresser dans le dossier de votre choix,

La décompression conduit au fichier de la page Web principale : position-souris-javascript.html. Cette page Html est accompagnée de ses ressources externes dans les sous dossiers : cartes, fond, images, js et styles.

• Double cliquer sur le fichier position-souris-javascript.html pour l'ouvrir dans un navigateur Internet,

Comme vous le constatez et comme l'illustre la capture ci-dessous, la structure globale de la page Web est préconçue.



Les balises HTML mises en forme et en page par des styles CSS, proposent les différents cadres prévus pour recevoir les informations dynamiques. La liste déroulante (Contrôle Input) permet de sélectionner l'un des départements. Mais bien sûr à ce stade, au choix de l'une des valeurs dans la liste, aucune action n'est enclenchée. Nous allons devoir programmer les événements qui permettront de déclencher le code Javascript pour atteindre le résultat final, dont la détection des coordonnées du curseur.

• Dans le dossier de décompression, double cliquer sur le sous dossier cartes pour l'ouvrir,

Ce sous dossier propose toutes les miniatures des départements qu'il s'agira d'afficher contextuellement, au choix dans la liste déroulante, et au survol de la zone délimitée. Le sous dossier fond propose quant à lui tous les arrières plans à afficher dans le Div à associer dans le déplacement de la souris. Vous l'avez remarqué, le nom de chacun de ces fichiers est préfixé du numéro du département pour faciliter la liaison dynamique par le code Javascript.

• Dans le dossier de décompression, cliquer avec le bouton droit de la souris sur le fichier de la page Web : position-souris-javascript.html,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur tel que le Notepad ++,

Dans la section Head de la page Html, vous notez la référence à un script externe (zones.js) :

...
<meta http-equiv="content-language" content="fr" />
<link href='styles/mef.css' rel='stylesheet' type='text/css' />
<script language='javascript' id='cible' src='js/zones.js'></script>
</head>
...

Nous y reviendrons, mais ce script Javascript recèle toutes les zones d'influence pour le survol de la souris sur les images des départements. Nous devrons y faire appel sur l'événement du choix de l'utilisateur, par le biais de la liste déroulante.

Entre les lignes 45 et 73 pour un éditeur Notepad, figure la structure de la page Web, organisée par l'imbrication des calques (balises Div) :

<div class="centre">
<div class="titre_centre">
<select id="choix_dep" class="liste">
<option value="00">Sélectionnez un département</option>
<option value="07-Ardèche">07-Ardèche</option>
<option value="26-Drome">26-Drome</option>
<option value="38-Isère">38-Isère</option>
<option value="69-Rhone">69-Rhone</option>
<option value="73-Savoie">73-Savoie</option>
</select>

<div id="calque_ville" class="liste_div" style="float:right;">
&nbsp;
</div>
</div>
</div>

<div class="colonne" id="colonne_gauche"> &nbsp; </div>
<div class="colonne" id="colonne_droite"> &nbsp; </div>

<div class="centre">
<div class="titre_centre" id="apercu">

</div>
</div>

Nous pouvons y noter la présence du contrôle Select d'identifiant choix_dep, pour la liste déroulante des départements. Les calques colonne_gauche et colonne_droite définissent les cadres destinés à recevoir dynamiquement, les images correspondant aux interactions avec l'internaute. Enfin le calque apercu définit le cadre inférieur dans lequel nous restituerons en temps réel, les cordonnées réceptionnées du curseur de la souris. Puis, en bas de la page HTML figure la section de Script, vide pour l'instant, destinée à accueillir le code de notre développement.

• Dans le dossier de décompression, double cliquer sur le sous dossier js pour l'ouvrir,
• Cliquer avec le bouton droit de la souris sur le fichier zones.js,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur tel que le Notepad,

Ce fichier de script propose deux fonctions. La première, zones_cartes, est déjà opérationnelle. La représentation graphique des départements a été travaillée en amont avec un logiciel tel que Photoshop. Une exportation pour le Web a permis l'interprétation des zones délimitées retranscrites en langage Html, directement exploitables pour une page Internet.

function zones_cartes(dep)
{
var zone_html="";

switch(dep)
{
case "07":
zone_html="<img src='cartes/07.jpg' width='263' height='216' border='0' alt='' usemap='#id07_Map'>";
zone_html += "<map name='id07_Map'>";
zone_html += "<area shape='circle' alt='Annonay' coords='136,74,2' href='annonay-07.aspx' target='_self'>";
zone_html += "<area shape='circle' alt='Privas' coords='132,97,2' href='privas-07.aspx' target='_self'>";
zone_html += "<area shape='poly' onMouseOver='informations(\"07\",\"Ardèche (07)\")' onmouseout=\"masque_div()\" alt='Ardeche' coords='141,71, 138,111,133,130, 128,131, 122,132, 118,133, 109,130, 102,104, 131,71, 140,66' href='position-souris-javascript.html?07-Ardeche' target='_self'>";
zone_html += "<area shape='poly' onMouseOver='informations(\"30\",\"Gard (30)\")' onmouseout=\"masque_div()\" alt='Gard' coords='113,135, 136,137,143,160, 134,171, 131,174, 113,187, 108,171, 88,156, 81,160, 72,165, 69,163,75,152, 72,147, 103,140, 100,129, 100,125, 105,126, 111,133' href='position-souris-javascript.html?30-Gard' target='_self'>";
zone_html += "<area shape='poly' onMouseOver='informations(\"48\",\"Lozère (48)\")' onmouseout=\"masque_div()\" alt='Lozere' coords='75,97, 82,101,86,98, 99,112, 101,123, 98,130, 98,143, 65,140, 62,137, 64,133, 61,127, 56,113,54,110, 54,108, 59,99, 69,93, 71,92' href='position-souris-javascript.html?48-Lozere' target='_self'>";
zone_html += "<area shape='poly' onMouseOver='informations(\"43\",\"Haute Loire (43)\")' onmouseout=\"masque_div()\" alt='Haute-Loire' coords='121,69, 127,74,119,83, 96,104, 83,96, 79,99, 77,98, 75,91, 63,64, 97,61' href='position-souris-javascript.html?43-Haute-Loire' target='_self'>";
zone_html += "<area shape='poly' onMouseOver='informations(\"42\",\"Loire (42)\")' onmouseout=\"masque_div()\" alt='Loire' coords='99,3, 104,7, 115,9,116,27, 119,42, 137,56, 129,69, 123,67, 116,62, 101,56, 99,42, 88,30, 94,20,96,0' href='position-souris-javascript.html?42-Loire' target='_self'>";
zone_html += "<area shape='poly' onMouseOver='informations(\"38\",\"Isère (38)\")' onmouseout=\"masque_div()\" alt='Isere' coords='188,55, 205,59,206,72, 211,79, 212,83, 215,88, 211,94, 202,97, 191,103, 177,96, 174,80,164,78, 161,66, 153,64, 141,64, 146,43, 154,34, 164,31, 167,26' href='position-souris-javascript.html?38-Isere' target='_self'>";
zone_html += "<area shape='poly' onMouseOver='informations(\"26\",\"Drôme (26)\")' onmouseout=\"masque_div()\" alt='Drome' coords='159,69, 162,74,165,83, 176,86, 177,99, 188,108, 183,112, 184,118, 175,121, 182,131, 189,135,186,142, 178,145, 172,138, 154,135, 147,136, 139,132, 136,130, 144,78, 146,69' href='position-souris-javascript.html?26-Drome' target='_self'>";
zone_html += "</map>";
break;
case "26":
...

C'est la balise HTML Area avec son attribut coords qui permet de délimiter des zones d'influences polygonales sur une page Web. Nous y avons ajouté les liens (balise a href) que chacune de ces zones doivent appeler au clic. En l'occurrence, la page appelée est celle de notre développement mais avec des paramètres (position-souris-javascript.html?26-Drome). Dans une prochaine formation, il s'agira de récupérer et d'exploiter ces valeurs passées par l'url, afin de fournir des résultats différents dans une même page, selon un concept de développement dynamique donc. Vous notez aussi l'ajout des événements onMouseOver et onMouseOut, destinés à enclencher des actions respectivement quand la souris se déplace sur un département, et quand elle sort de sa zone d'influence. Dans les deux cas, une fonction Javascript est appelée. La fonction informations existe déjà en bas de ce script mais elle est vide de code pour l'instant. Elle devra être en mesure d'inscrire des informations dynamiques dans le calque destiné à suivre les mouvements du curseur de la souris. La fonction masque_div doit être créée pour cacher le calque et les informations qu'il contient, lorsque la souris quitte la zone d'influence.

• En bas du script, après la fonction informations, créer la fonction masque_div, comme suit :

function masque_div()
{

}

Elle manquait, elle existe désormais. Nous nous chargerons de son implémentation en temps voulu.

Image contextuelle sur événement
Au choix d'un département depuis la liste déroulante, nous proposons de restituer l'affichage de l'image en corrélation dans le cadre de gauche, d'identifiant colonne_gauche. Cette corrélation est déjà codée par la fonction zones_cartes du script externe. Il suffit de lui passer le paramètre du numéro de département choisi, puisqu'elle est ainsi conçue dans sa signature. C'est ensuite une instruction Javascript Switch qui selon le numéro, restitue la bonne carte, grâce à l'instruction return.

• Basculer dans le code de la page position-souris-javascript.html,
• Dans le script en bas de page, ajouter la déclaration publique de variable suivante :

var bascule="1";

Nous exploiterons cette valeur portable pour mettre fin à l'événement qui consiste à prélever la position de la souris, lorsque cette dernière sort de la zone d'influence.

• Puis, créer la fonction afficher_carte comme suit :

function afficher_carte()
{
var le_dep = document.getElementById("choix_dep").value.substr(0,2);
document.getElementById("colonne_gauche").innerHTML = zones_cartes(le_dep);
}

La méthode getElementById de l'objet Javascript document permet de pointer sur le contrôle Html dont l'identifiant lui est passé en paramètre. Sa propriété value permet alors d'accéder à son contenu au moment de l'événement, pour récupérer le département désigné par le biais de la liste déroulante. La méthode Javascript substr permet de ne prélever que les deux premiers caractères de cette valeur, soit le numéro du département. Ce résultat est stocké dans la variable le_dep. Nous la passons à la fonction zones_cartes du script externe. La chaîne retournée, celle de la carte correspondante, balisée en Html, est alors écrite dans le calque d'identifiant colonne_gauche. Comme dans la formation Javascript sur les listes déroulantes liées, nous exploitons la propriété innerHTML afin de reconstruire son balisage à la volée. Cette fonction pour être testée, doit être appelée au choix d'un département soit au changement de valeur détecté dans le contrôle Html Select. C'est l'attribut onChange en Html qui permet de gérer cet événement.

• En ligne 47 du code Html pour un éditeur Notepad, ajouter l'appel de la fonction par le biais de l'attribut onChange, comme suit :

<select id="choix_dep" class="liste" onChange="afficher_carte()">
<option value="00">Sélectionnez un département</option>
<option value="07-Ardèche">07-Ardèche</option>
<option value="26-Drome">26-Drome</option>
<option value="38-Isère">38-Isère</option>
<option value="69-Rhone">69-Rhone</option>
<option value="73-Savoie">73-Savoie</option>
</select>

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Internet,
• Rafraichir la page à l'aide de la touche F5 du clavier par exemple,
• Choisir un département à l'aide de la liste déroulante,

Le code Html résultant est parfaitement restitué par la fonction du script externe. Comme ce dernier consiste à délimiter les zones d'influence de la souris selon les contours des départements, dans l'image, cette dernière est affichée dans le calque colonne_gauche de la page Web. Tout est conforme à ce que nous avions codé.

Détecter les coordonnées de la souris sur la page Web
Comme nous souhaitons afficher des informations contextuelles dans un calque qui suit le mouvement du pointeur, nous avons besoin de connaître les coordonnées de la souris à tout moment. Ainsi nous pourrons réajuster la position du calque infos qu'il ne restera plus qu'à remplir des données pertinentes. C'est alors qu'interviendra la fonction informations du script externe puisqu'elle est conçue pour réceptionner les informations au survol de la carte.

• Revenir dans l'éditeur de code de la page Web,
• Dans la section du script en bas de page, créer la fonction positionSouris comme suit :

function positionSouris()
{
}

• Dans les bornes de la fonction, ajouter les lignes de code suivantes :

if(bascule=="2")
return;

var pos_X = ""; var pos_Y="";

La variable bascule devra être réaffectée à chaque fois que la souris sort de la zone d'influence. Ce test permettra de le confirmer et de stopper l'exécution du code destiné à prélever les coordonnées. Puis, vient la déclaration des variables nécessaires au stockage des informations. Ainsi, les variables pos_X et pos_Y doivent respectivement mémoriser l'abscisse et l'ordonnée du pointeur de la souris, au cours de son déplacement.

• A la suite du code de la fonction, ajouter les instructions suivantes :

pos_X = event.clientX;
pos_Y = event.clientY;

pos_X += document.body.scrollLeft;
pos_Y += document.body.scrollTop;

L'objet Javascript event désigne le gestionnaire d'événements de la page Web au sens large. Associé à ses propriétés clientX et clientY, il renvoie respectivement l'abscisse et l'ordonnée de la souris par rapport à la fenêtre d'affichage du navigateur Web. Mais ce contexte ne prend pas en compte le potentiel scroll réalisé par l'internaute à l'aide des ascenseurs. C'est la raison pour laquelle nous ajoutons à chacune des ces coordonnées, les éventuels déplacements. La propriété dérivée scrollLeft de la propriété body de l'objet Javascript document permet d'incrémenter le déplacement horizontal. Et bien sûr, la propriété dérivée scrollTop permet de réajuster la position verticale.

Il est temps désormais d'exploiter ces valeurs pour positionner le calque prévu à cet effet, même si pour l'instant nous ne l'avons rempli d'aucune information contextuelle. Nous en profiterons pour afficher les coordonnées récoltées dans le calque situé en bas de la page Web, d'identifiant apercu.

• A la suite du code de la fonction, ajouter les instructions suivantes :

document.getElementById("apercu").innerHTML = "Coordonnées de la souris, Abscisse : " + pos_X + ", Ordonnée : " + pos_Y;

document.getElementById("infos").style.visibility = "visible";
document.getElementById("infos").style.top = pos_Y + 35;
document.getElementById("infos").style.left = pos_X - 100;

Tout d'abord, la propriété innerHTML d'un contrôle Html Div permet d'inscrire des informations au format Html à l'intérieur du calque. Nous y concaténons les informations sur les coordonnées de la souris pour les offrir à l'internaute. Puis, nous affichons le calque infos grâce à l'attribut visibility de sa propriété style. Enfin, nous ajustons l'emplacement du calque, en fonction des coordonnées de la souris, moyennant un décalage en abscisse et en ordonnée pour qu'il ne chevauche pas le pointeur. A chaque fois, c'est la méthode incontournable getElementById de l'objet Javascript document, qui a permis de désigner le calque à régler.

Cette fonction ne peut pas être appelée directement. En effet, selon que la souris entre ou sort de la zone d'influence, le calcul doit être initié ou stoppé. La variable publique bascule sert à contrôler ce statut. Elle doit donc être réglée par deux fonctions intermédiaires appelées sur les événements appropriés.

• Pour ce faire, créer les deux fonctions suivantes :

function afficher_souris()
{
bascule="1";
document.onmousemove = positionSouris;
}

function sortir_souris()
{
bascule="2";
document.getElementById("infos").style.visibility = "hidden";
}

La fonction afficher_souris cale d'abord la variable publique sur la valeur donnant le feu vert aux calculs de coordonnées, puis appelle la fonction positionSouris sur événement. Elle doit être appelée au survol de la carte affichée, suite au choix de l'utilisateur par le biais de la liste déroulante. La fonction sortir_souris règle la variable publique sur le numéro indiquant que le calcul doit s'arrêter puis masque le calque destiné aux informations contextuelles. Elle doit être appelée lorsque le pointeur quitte la zone d'influence du calque affichant l'image.

• En ligne 62 pour un éditeur Notepad, ajouter les deux gestionnaires d'événements au div colonne_gauche, comme suit :

<div class="colonne" id="colonne_gauche" onMouseOver="afficher_souris()" onMouseOut="sortir_souris()">
&nbsp;
</div>

• Enregistrer les modifications et basculer sur le navigateur Web,
• Rafraîchir la page à l'aide de la touche F5 du clavier,
• Choisir un département dans la liste déroulante,
• Puis déplacer le pointeur de la souris sur l'image ainsi affichée dynamiquement,

Comme vous le constatez, l'abscisse et l'ordonnée de la souris sont parfaitement restituées dans le calque apercu en bas de la page et ce, en temps réel, soit durant tout le déplacement du pointeur.



Dès lors que la souris quitte la zone d'influence du calque colonne_gauche, le calcul se stoppe conformément au recalibrage de la variable publique bascule. Le calque infos est censé suivre le déplacement en fonction des coordonnées récoltées. Mais comme il n'est pas encore chargé d'informations, il est transparent et ne se voit pas. Nous proposons simplement de restituer les données correspondant au département survolé sur la carte. Souvenez-vous, c'est la fonction zones_cartes du script externe, qui réalise ces appels en lui passant les paramètres contextuels.

• Afficher le script externe dans l'éditeur de code Notepad,
• Dans les bornes de la fonction informations, ajouter les instructions suivantes :

document.getElementById("infos").style.visibility = "visible";
document.getElementById("infos").innerHTML = "<br/>Département :<br /><br /><strong>" + texte_dep + "</strong>";
document.getElementById("infos").innerHTML += "<br/><br />----------------<br /><br />";
document.getElementById("infos").innerHTML += "Synthèse idées de sorties<br />à collecter depuis serveur";
document.getElementById("infos").style.backgroundImage = "url(fond/" + num_dep + ".gif)";
document.getElementById("colonne_droite").innerHTML = "<img src='cartes/" + num_dep + ".gif' />";

Comme toujours, grâce à la propriété innerHTML d'un contrôle Div, nous inscrivons et concaténons les informations utiles, à l'intérieur du calque désigné par son identifiant (infos). Ainsi nous affichons le nom du département, grâce à la variable texte_dep passée au moment de l'appel, grâce à l'attribut onMouseOver programmé sur chaque section de la carte restituée. Puis, comme vous le constatez, nous exploitons l'attribut backgroundImage de la propriété style d'un contrôle Div, pour lui attribuer une image d'arrière-plan. Comme nous l'avions montré en préambule, ces images sont préfixées du numéro du département et se situent dans le sous dossier relatif fond de la page Web. C'est ainsi que nous exploitons le second paramètre passé en argument de la fonction (num_dep), pour reconstruire le chemin d'accès au fichier (url(fond/" + num_dep + ".gif)), selon la syntaxe Html des attributs de styles. Enfin, cerise sur le gâteau, nous chargeons le calque de droite (colonne_droite) de l'image zoomée, correspondant au département survolé. Pour ce faire, nous nous contentons de réécrire le code Html à l'intérieur du calque, grâce comme toujours, à sa propriété innerHTML. Et c'est la balise img avec son attribut src qui permet d'afficher l'image désignée par son chemin d'accès, reconstruit dynamiquement là aussi.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Réactualiser la page à l'aide du raccourci clavier CTRL + F5,

Cette astuce permet de vider le cache du navigateur pour rafraîchir les ressources externes de la page Html, donc du script que nous venons de modifier.

• Choisir un département dans la liste déroulante,
• Puis déplacer la souris sur la carte graphique du cadre de gauche,

Cette fois nous en avons la confirmation. Le calque infos se déplace précisément selon les coordonnées du pointeur de la souris sur la page Web, moyennant un décalage codé dans la fonction Javascript. Son contenu s'adapte au changement de département lors du survol de la souris grâce aux balises Html area qui réalisent l'appel de la fonction informations avec les paramètres contextuels. Le fond du contrôle Div est lui aussi contextuel et l'image zoomée du département survolé s'affiche parfaitement dans le calque situé sur la droite de la page Web.

Si vous déplacez la souris en dehors de la zone d'influence du calque colonne_gauche, en même temps que le calcul des coordonnées se stoppe, le calque contextuel infos disparaît. Cependant, il n'est pas vidé de son contenu, il est simplement rendu invisible, grâce à l'attribut visibility de sa propriété style. Pour palier toute éventualité, selon les différences d'interprétations que pourraient offrir les navigateurs, nous proposons de supprimer ses données, grâce à la fonction masque_div prévue à cet effet.

• Revenir dans l'éditeur de code du script externe,
• Dans les bornes de la fonction masque_div, ajouter les instructions suivantes :

document.getElementById("infos").style.backgroundImage = "";
document.getElementById("infos").innerHTML = "";
document.getElementById("infos").style.visibility = "hidden";

Nous vidons l'image d'arrière-plan du calque, nous vidons son contenu et masquons de nouveau son affichage. Il est important de comprendre que le calque contextuel, peut être déplacé librement par le code Javascript grâce à son attribut position réglé sur la valeur absolute, dans la feuille de styles mef.css qui est attachée à la page Web.

.texte_div
{
font-size:15px;
z-index:130;
position:absolute;
border-style:none;
background-image:url(fond/fd-roll.gif);
width:250px;
height:170px;
visibility:hidden;
text-align:center;
}

Il est à noter que l'objet Javascript event est un objet particulier. Il peut proposer des dysfonctionnements avec d'anciens navigateurs comme Internet Explorer mais aussi avec certaines versions de Firefox. Pour palier le problème, il convient de passer un argument de gestion d'événement à la fonction positionSouris. Si cet argument est reconnu en tant que tel, alors il doit être exploité. Le code complet de la fonction positionSouris réalisant parfaitement le calcul des coordonnées du pointeur, quel que soit le navigateur Internet et sa version est le suivant :

function positionSouris(evt)
{
if(bascule=="2")
return;

var pos_X = ""; var pos_Y="";

if(evt)
{
pos_X = evt.pageX;
pos_Y = evt.pageY;
}
else
{
pos_X = event.clientX;
pos_Y = event.clientY;

pos_X += document.body.scrollLeft;
pos_Y += document.body.scrollTop;
}

document.getElementById("apercu").innerHTML = "Coordonnées de la souris, Abscisse : " + pos_X + ", Ordonnée : " + pos_Y;

document.getElementById("infos").style.visibility = "visible";
document.getElementById("infos").style.top = pos_Y + 35;
document.getElementById("infos").style.left = pos_X - 100;
}

Le défi de cette formation est relevé. Nous avons bien réussi à prélever les coordonnées du curseur de la souris pendant son déplacement. Avec ces informations, nous avons réussi à proposer un calque contextuel, proche du clic pour faciliter l'accès et améliorer l'ergonomie de l'application Web. Lorsque nous apprendrons le développement côté serveur, avec notamment le langage Php, nous créerons des routines capables de préremplir des fichiers de données issues des bases situées sur le serveur. Le code Javascript n'aura plus qu'à se nourrir de ces informations pour les restituer à l'internaute, dans le calque contextuel. Ainsi, une fois de plus, nous équilibrerons parfaitement les charges entre le client et le serveur.