Médiaforma

All posts tagged souris

Le bouton droit de la souris peut être utilisé pour afficher un menu contextuel qui contient des commandes liées à l’objet pointé.

Voici quelques exemples :

  • Lorsque vous cliquez du bouton droit sur une icône du ruban, vous pouvez ajouter cette icône dans la barre d’outils Accès rapide ou personnaliser le ruban.
  • Lorsque vous cliquez du bouton droit sur une cellule, vous pouvez effectuer un couper/copier/coller dans cette cellule, modifier le format de la cellule, insérer un commentaire, etc.
  • Lorsque vous cliquez du bouton droit sur un des onglets situés au-dessus de la barre d’état, vous pouvez insérer, supprimer, renommer, déplacer ou copier la feuille de calcul correspondante.

Vous trouverez beaucoup d’autres situations pour lesquelles le bouton droit de la souris permet d’accélérer les tâches courantes.


Le tableau suivant regroupe les différents événements souris qui peuvent être traités en jQuery :

Méthode Événement géré
click() Clic gauche
dbclick() Double-clic
mousedown() Appui sur le bouton gauche ou droit de la souris alors que le pointeur est au-dessus de l’élément
mouseenter() ou mouseover() Début de survol de l’élément
mouseleave() ou mouseout() Arrêt de survol de l’élément
mousemove() Déplacement du pointeur au-dessus de l’élément
mouseup() Relâchement du bouton gauche ou droit alors que le pointeur est au-dessus de l’élément
scroll() Utilisation de la roulette alors que le pointeur se trouve au-dessus d’un élément concerné par ce type d’événement

 

Ce premier exemple va capturer les coordonnées de la souris au-dessus d’une image et les afficher dans un span. L’événement capturé est onmousemove. Ainsi, à chaque déplacement de la souris, les coordonnées seront mises à jour dans le span. Tapez le code suivant dans Notepad++ et sauvegardez-le dans le fichier mouse-move.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Utilisation de l'événement mousemove</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="desert.jpg"><br/>
    <span id="xy"></span>
    <script>
      $(function() {
        // Gestion du clic et déplacement de l'image
        $("#target").mousemove(function(e) {
          var y = e.pageY;
          var x = e.pageX;
          $('#xy').html("x = " + x + ", y = " + y);
         });
      });
    </script>
  </body>
</html>

 

 

Voici le résultat :

 

Exercice

Tapez ce code dans Notepad++ et sauvegardez-le sous le nom taille-image.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille de l'image sur click et mouseout</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="desert.jpg"><br/>
    <span id="xy"></span>
    <script>
      $(function() {
      });
    </script>
  </body>
</html>

 

Ecrivez quelques lignes de jQuery pour :

  1. Augmenter la taille de l’image lorsque l’utilisateur clique dessus.
  2. Redonner la taille originale à l’image lorsque le pointeur ne la survole plus.

 

Solution

$(function() {
  $("#target").mousedown(function(e) {
    var largeur = $('#target').width();
    $('#target').css('width',largeur+10);
  });
  $("#target").mouseout(function(e) {
    var largeur = $('#target').width();
    $('#target').css('width',160);
  });
});

Dans une rubrique précédente, vous avez appris à modifier le pointeur de la souris. Je vais maintenant vous montrer comment lui affecter une image quelconque. Ici par exemple, le curseur de la souris se modifie au survol de la balise <div> de couleur jaune :

Examinons le code :

Le code HTML ne contient qu’une balise <div> de classe carre.

Le code CSS définit les dimensions de la balise <div>, sa couleur d’arrière-plan et le pointeur à utiliser.


Cette rubrique va vous montrer comment modifier le pointeur de la souris dans un document. L’utilisateur choisit un pointeur en sélectionnant un bouton radio. Le pointeur change immédiatement de forme jusqu’à ce qu’il sélectionne un autre bouton radio.

Voici le code utilisé :

Le code HTML définit dix-huit boutons radio. Chacun d’entre eux a pour nom pointeur, mais les valeurs qui sont affectées à leur attribut value sont différentes. Lorsque l’utilisateur choisit un bouton radio en cliquant dessus, la fonction JavaScript change() est exécutée, en lui transmettant l’élément this.form.pointeur, c’est-à-dire l’ensemble des boutons radio.

Examinons le code JavaScript.

Lorsqu’un bouton radio est choisi, la fonction change() s’exécute. Les boutons radio this.form.pointeur qui lui sont transmis seront manipulés sous le nom radio dans la fonction.

Une boucle for passe en revue chacun des boutons radio. Le parcours se fait du premier bouton radio au dernier en utilisant les valeurs 0 et radio.length :

for (var i=0; i<radio.length;i++)

Si un des boutons radio est sélectionné :

if (radio[i].checked)

Sa valeur est stockée dans la variable p :

var p = radio[i].value;

Une fois la boucle terminée, la forme du pointeur est mise à jour en lui appliquant la valeur stockée dans la variable p :

document.body.style.cursor = p;


Les réglages relatifs à la souris sont peu nombreux. Pour y accéder, cliquez sur l’icône Préférences système dans le Dock, puis sur l’icône Souris dans la fenêtre Préférences système. Cette action affiche la boîte de dialogue Souris.

Selon son état, la case à cocher Sens du défilement inverse le sens de défilement lors d’une action sur la roulette de la souris. Les curseurs Vitesse de déplacement, Vitesse de défilement et Vitesse de double clic sont très classiques. Ils permettent de choisir (respectivement) la vitesse de déplacement du pointeur sur l’écran, la vitesse de défilement lors de l’action sur la roulette de la souris et la vitesse du double clic. Enfin les boutons radio Gauche et Droit permettent de définir le bouton principal de la souris. Choisissez Gauche si vous êtes droitier et Droit si vous êtes gaucher.


Pour accéder aux paramètres de la souris, cliquez sur Démarrer, tapez panneau et cliquez sur Panneau de configuration. Dans la fenêtre du Panneau de configuration, tapez souris dans la zone de texte Rechercher, puis cliquez sur Modifier les paramètres de la souris. Une boîte de dialogue comportant plusieurs onglets s’affiche. Le nombre d’onglets est directement lié au type de la souris et de l’ordinateur utilisés :

Sous l’onglet Boutons, vous pouvez inverser les boutons de la souris si vous êtes gaucher et régler la vitesse du double-clic. Cochez la case Activer le verrouillage du clic si vous voulez sélectionner les éléments sur lesquels vous cliquez. Vous pourrez ainsi les déplacer où bon vous semble sans maintenir le bouton gauche de la souris enfoncé.
L’onglet Pointeurs permet de choisir les différentes formes du pointeur de la souris. Vous pouvez choisir un modèle prédéfini et/ou modifier individuellement chacune des formes du pointeur.

Vous utiliserez l’onglet Options du pointeur pour régler la vitesse de déplacement du pointeur. Cochez la case du groupe d’options Ancrage si vous voulez que le pointeur se positionne automatiquement au-dessus du bouton par défaut dans les boîtes de dialogue. Le groupe d’options Visibilité propose diverses techniques pour améliorer la visibilité du pointeur. Il vous sera utile si vous avez du mal à repérer le pointeur sur l’écran.

L’onglet Roulette définit la vitesse de défilement de la ou des roulettes.

L’onglet Matériel donne accès aux paramètres du pilote de périphérique :

Enfin, l’onglet Réglages du dispositif est une petite merveille si vous utilisez un ordinateur portable sur lequel vous voulez désactiver le touchpad au profit d’une souris traditionnelle. En cochant la case Désactiver le dispositif de pointage interne lorsque le dispositif de pointage USB est relié au système, le touchpad est automatiquement désactivé lorsqu’une souris USB est détectée. Je suis sûr que beaucoup d’utilisateurs vont apprécier :

Modifiez les paramètres sous un ou plusieurs onglets, puis cliquez sur OK pour confirmer les nouveaux réglages.


Pour accéder aux paramètres de la souris, cliquez sur Démarrer, tapez panneau et cliquez sur Panneau de configuration. Dans la fenêtre du Panneau de configuration, tapez souris dans la zone de texte Rechercher, puis cliquez sur Modifier les paramètres de la souris. Une boîte de dialogue comportant plusieurs onglets s’affiche. Le nombre d’onglets est directement lié au type de la souris et de l’ordinateur utilisés :

Sous l’onglet Boutons, vous pouvez inverser les boutons de la souris si vous êtes gaucher et régler la vitesse du double-clic. Cochez la case Activer le verrouillage du clic si vous voulez sélectionner les éléments sur lesquels vous cliquez. Vous pourrez ainsi les déplacer où bon vous semble sans maintenir le bouton gauche de la souris enfoncé.

L’onglet Pointeurs permet de choisir les différentes formes du pointeur de la souris. Vous pouvez choisir un modèle prédéfini et/ou modifier individuellement chacune des formes du pointeur.

Vous utiliserez l’onglet Options du pointeur pour régler la vitesse de déplacement du pointeur. Cochez la case du groupe d’options Ancrage si vous voulez que le pointeur se positionne automatiquement au-dessus du bouton par défaut dans les boîtes de dialogue. Le groupe d’options Visibilité propose diverses techniques pour améliorer la visibilité du pointeur. Il vous sera utile si vous avez du mal à repérer le pointeur sur l’écran.

L’onglet Roulette définit la vitesse de défilement de la ou des roulettes.

L’onglet Matériel donne accès aux paramètres du pilote de périphérique :

Enfin, l’onglet Réglages du dispositif est une petite merveille si vous utilisez un ordinateur portable sur lequel vous voulez désactiver le touchpad au profit d’une souris traditionnelle. En cochant la case Désactiver le dispositif de pointage interne lorsque le dispositif de pointage USB est relié au système, le touchpad est automatiquement désactivé lorsqu’une souris USB est détectée. Je suis sûr que beaucoup d’utilisateurs vont apprécier :

Modifiez les paramètres sous un ou plusieurs onglets, puis cliquez sur OK pour confirmer les nouveaux réglages.