Mon compte

ArticleCommentaires LireHistoriqueModifier

Gestion de la souris sur internet

La gestion de la souris sur internet est possible sur internet, par exemple pour réaliser un programme de dessin en ligne.

PHP ou Javscript [Modifier]

PHP étant plus puissant que Javascript, on pourrait penser à l'utiliser en priorité. Mais PHP ne permet la gestion de la souris que via les fonctions ncurses (new curses). Or celles-ci ne font plus partie du PHP standard. Elles ont été reléguées dans le PECL repository. De plus, elles sont prévues pour le mode console et pas pour le mode internet classique. Les fonctions PECL dépendent d'Unix. Les fournisseurs d'accès ne donnent pas souvent la possibilité d'avoir PECL.

De toutes manières, PHP est fait pour préparer une page, plutôt que pour interagir avec le poste client. C'est donc Javascript qui doit traiter les actions de la souris et envoyer à PHP, via une fonction submit ou Ajax, des informations sur les événements locaux au poste de l'utilisateur.

Exemple en Javascript, sans scrolling [Modifier]

<html>
<head>
  <style>
    body {
      height: 3000px;
    }
    .info {
      color: black;
      background-color: lightgray;
    }
  </style>
  <script type="text/javascript">
    function mouseclick() {
      document.getElementById("info_mouse_click_x").innerHTML = event.clientX;
      document.getElementById("info_mouse_click_y").innerHTML = event.clientY;
      //x=Math.round(event.clientX-rect.left);
      //y=Math.round(event.clientY-rect.top);
    }
    function mousedown() {
      document.getElementById("info_mouse_down_x").innerHTML = event.clientX;
      document.getElementById("info_mouse_down_y").innerHTML = event.clientY;
    }
    function mouseup() {
      document.getElementById("info_mouse_up_x").innerHTML = event.clientX;
      document.getElementById("info_mouse_up_y").innerHTML = event.clientY;
    }

    document.onmousemove = function(e) {
      var event = e || window.event;
      window.mouseX = event.clientX;
      window.mouseY = event.clientY;
    }
    function mousemov() {
      document.getElementById("info_mouse_track_x").innerHTML = window.mouseX;
      document.getElementById("info_mouse_track_y").innerHTML = window.mouseY;
    }
    
    window.onload = function() {
      document.addEventListener("click", mouseclick, false);
      document.addEventListener("mousedown", mousedown, false);
      document.addEventListener("mouseup", mouseup, false);
      setInterval(mousemov, 1000);
    }
  </script>
</head>
<body>
<h1>Exemple de suivi de la position de la souris en javascript</h1>
Affiche la position de la souris lors d'un clic et aussi à chaque seconde (testé avec Chrome 45 (2015)).
<p>
Mouse last click: <span id="info_mouse_click_x" class="info">0</span>, <span id="info_mouse_click_y" class="info">0</span>.
<br />
Mouse last drag start: <span id="info_mouse_down_x" class="info">0</span>, <span id="info_mouse_down_y" class="info">0</span>.
<br />
Mouse last drag end: <span id="info_mouse_up_x" class="info">0</span>, <span id="info_mouse_up_y" class="info">0</span>.
<br />
Mouse track: <span id="info_mouse_track_x" class="info">0</span>, <span id="info_mouse_track_y" class="info">0</span>.
</body>
</html>

Site de dessin en ligne [Modifier]

Voici des sites intéressants de dessin en ligne :


Catégorie : Electricité.