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);
  });
});

Saviez-vous qu’il est possible de changer l’apparence du pointeur de la souris sous Windows 7 ?

Cliquez du bouton droit sur une partie inoccupée du Bureau et sélectionnez Personnaliser dans le menu contextuel. Cliquez sur Modifier les pointeurs de souris dans le volet gauche de la fenêtre Personnalisation. Cette action affiche la boîte de dialogue des propriétés de la souris. La zone de liste Personnaliser vous montre les différents aspects que peut prendre le pointeur de la souris. Pour modifier tous ces aspects en une seule opération, il vous suffit de dérouler la liste Modèle et de choisir un autre réglage. Ici, par exemple, nous choisissons le modèle Windows inversé.

Pour modifier une des formes du pointeur, double-cliquez dessus dans la zone de liste Personnaliser et faites votre choix dans la boîte de dialogue Parcourir.

Notez également qu’il est possible d’activer ou de désactiver l’ombre du pointeur et de revenir à la configuration par défaut.


S’il vous arrive de perdre de vue la souris sur l’écran et d’avoir du mal à la retrouver, cette vidéo va vous montrer comment faire en sorte que cela ne se reproduise plus. Read more


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;


Dans cette rubrique, je vais vous montrer comment démarrer votre ordinateur en appuyant sur une touche de la souris (attention, cette astuce n’est applicable que sur les souris USB).

Mettez l’ordinateur sous tension et appuyez sur la touche qui donne accès au BIOS. Généralement, il s’agit de la touche F2, Suppr, F10 ou F9.

Rendez-vous dans le menu USB Configuration et affectez la valeur Enabled à la commande USB Mouse Power On.

Quittez le BIOS en sauvegardant les modifications. Généralement, vous devrez quitter le menu actuel en appuyant sur la touche Echap du clavier, afficher le menu Exit et lancer la commande Save Changes and Exit.

Désormais, il vous suffit de cliquer sur une touche de la souris pour démarrer l’ordinateur.