Médiaforma

jQuery – Gestion de la souris

Print Friendly

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);
  });
});
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply