Simulation d'une sélection

Auteur : Bisûnûrs.

FAQ utilisée : Récupérer les coordonnées de la souris

Script utilisable : A cette adresse

Description : Vous pouvez créer des cadres dans la zone rouge en déplaçant votre souris à la manière d'une sélection.

Code source :


Code js : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
var debX, debY, arrX, arrY, div;
function debut(e){
   if(parseInt(navigator.appVersion) >=4){
      if(navigator.appName == 'Netscape'){
         debX = e.pageX ;
         debY = e.pageY;
      }
      else{
         debX = event.x ;
         debY = event.y;
      }
   }
   document.getElementById('gnia').onmousemove = function(){encours(e)};
   div = document.createElement('div');
}
function encours(e){
   if(parseInt(navigator.appVersion) >=4){
      if(navigator.appName == 'Netscape'){
         arrX = e.pageX ;
         arrY = e.pageY;
      }
      else{
         arrX = event.x ;
         arrY = event.y;
      }
   }
   creation();
}
function fin(){
   document.getElementById('gnia').onmousemove = "";
   div.style.backgroundColor = "#ff0";
   div.style.border = "0";
}
function creation(){
   div.style.border = "1px dashed #ff0";
    
   if(debX <= arrX){
      div.style.width = arrX-debX+"px";
      div.style.left = debX+"px";
   }
   else{
      div.style.width = debX-arrX+"px";
      div.style.left = arrX+"px";
   }
   if(debY <= arrY){
      div.style.height = arrY-debY+"px";
      div.style.top = debY+"px";
   }
   else{
      div.style.height = debY-arrY+"px";
      div.style.top = arrY+"px";
   }
   div.style.lineHeight = "2px";
   div.style.fontSize = "2px";
   div.style.position = "absolute";
   document.getElementById('gnia').appendChild(div);
}


Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<div id="gnia" onmousedown="debut(event)" onmouseup="fin()"></div>

Remarques : Fonctionne parfaitement sur IE6, Firefox 1.5 et Opéra 9.02 (quoi que sur ce dernier on ne peut pas débuter de sélection sur un cadre présent).
Ne fonctionne pas sur Firefox 2 (allez savoir pourquoi).
Je n'ai pas encore trouvé de cas concret pour lequel ce code a son utilité mais bon.