[SRC] Simulation d'une sélection

Version imprimable

Citation:

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:

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";
&nbsp;&nbsp;&nbsp;&nbsp;
   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:

<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. :roll:

21/11/2006, 20h00
FremyCompany

Attention, le script ne marche pas tout à fait...
Si on ouvre une selection, puis qu'on appuie sur le boutton droit, le cadre reste "figé"...
Il faudrait voir ce qu'il faut changer pour changer ca...
21/11/2006, 23h53
Bisûnûrs

De la même manière, si on relâche la bouton de la souris en dehors du cadre et qu'on y revient il ne se rempli pas.

Je fais des recherches pour l'améliorer, merci pour ta remarque. :ccool:
14/03/2007, 20h45
Bisûnûrs

Comme me l'a fait remarquer DoubleU par MP, pour que ça fonctionne sur Firefox 2 il suffit de remplacer cette ligne :

Code:

document.getElementById('gnia').onmousemove = function(){encours(e)};

par celle-là :

Code:

document.getElementById('gnia').onmousemove = encours;

Aucun problème de compatibilité avec IE6 et FF1.5.

Merci à lui. :ccool:

J'ai le felmem de tester... mais est-ce qu'il dessine en temps réel un tracé en pointillé de la selection ?
peut il aussi gérer le sens du traçage ??

j'en avais un pour IE ...

Code:

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<HTML> 
<HEAD> 
 
<SCRIPT LANGUAGE="JavaScript"><!-- 
var first=-1
var x,y,x2,y2,topdiv,leftdiv,blx, bly
 
function GestionClick() { 
 
first++;
 
if(first==0){ 
			if(parseInt(navigator.appVersion) >=4){
      			if(navigator.appName == 'Netscape'){
         			x=window.event.x; 
          			y=window.event.y;  
      			}
      else{
         x = event.x ;
         y = event.y;
 	     }
 	     }   
 
 
 
//          x=window.event.x; 
  //        y=window.event.y;  
          topdiv=y;
          leftdiv=x;
          blx=x;
          bly=y;
          affiche();
first=1;
} 
 
if(first==2){
var sendem=confirm('validez vous la capture ?\n\- Coordonnées du coin en haut à gauche: \('+leftdiv+','+topdiv+'\)\n\- Coordonnées du coin en bas à droite: \('+blx+','+bly+'\)');
first=-1,topdiv=0,leftdiv=0,blx=0,bly=0;
affiche();
 
//ici il ne te reste plus qu'a chopper le top left top+height left+width ....
}
 
} 
 
 
function drawdiv(){
document.getElementById('dotframe').style.display='none'
if (first==1){
 
		switch (true){
		     case (window.event.x || event.x)< parseInt(document.getElementById('ecran').offsetLeft):
					x2=parseInt(document.getElementById('ecran').offsetLeft)
					break;
				case (window.event.x || event.x)>parseInt(document.getElementById('ecran').offsetLeft)+parseInt(document.getElementById('ecran').offsetWidth):
					x2=parseInt(document.getElementById('ecran').offsetLeft)+parseInt(document.getElementById('ecran').offsetWidth)
					break;
				default:
				 	x2=(window.event.x||event.x);
					}	
		switch (true){
		     case (window.event.y||event.y)< parseInt(document.getElementById('ecran').offsetTop):
					y2=parseInt(document.getElementById('ecran').offsetTop)
					break;
				case (window.event.y||event.y)>parseInt(document.getElementById('ecran').offsetTop)+parseInt(document.getElementById('ecran').offsetHeight):
					y2=parseInt(document.getElementById('ecran').offsetTop)+parseInt(document.getElementById('ecran').offsetHeight)
					break;
				default:
				 	y2=(window.event.y||event.y);
					}	
 
 
          topdiv=(y2<y)?y2:y;
          leftdiv=(x2<x)?x2:x;
          x2=(x2<leftdiv)?x:x2;
          y2=(y2<topdiv)?y:y2;
          blx=(x2<x)?x:x2;
          bly=(y2<y)?y:y2;
 
          affiche();
 
document.getElementById('dotframe').style.top=topdiv+'px';
document.getElementById('dotframe').style.left=leftdiv+'px';
document.getElementById('dotframe').style.height=(bly-topdiv)+'px';
document.getElementById('dotframe').style.width=(blx-leftdiv)+'px';
document.getElementById('dotframe').style.display='block';
 
}
}
 
 
function affiche(){
    		document.test.x.value = leftdiv;
          document.test.y.value = topdiv;
          document.test.x2.value = blx;
          document.test.y2.value = bly;
}
 
//--></SCRIPT>
 
</HEAD>
 
<BODY onclick="GestionClick()" onmousemove="drawdiv()">
 
<FORM NAME="test">
<table>
 <tr>
 	<td>X:</td>
 	<td><INPUT TYPE="TEXT" NAME="x" SIZE="4"></td>
 	<td>Y:</td>
 	<td><INPUT TYPE="TEXT" NAME="y" SIZE="4"></td>
 </tr>
 	<td>X2:</td>
 	<td><INPUT TYPE="TEXT" NAME="x2" SIZE="4"></td>
 	<td>Y2:</td>
 	<td><INPUT TYPE="TEXT" NAME="y2" SIZE="4"></td>
 </tr>
</table>	
</FORM>
<div id="ecran" style="position:absolute;top:100px; left:100px">
<img id="image" src="imagetest.gif" />
</div>
<div id="dotframe" style="position:absolute;display:none;height:0px;width:0px;background-color:none;border:1px gray;z-index:2;top:0px;left:0px;border-style:dotted;font-size:0px;"></div>
</BODY>
</HTML>

16/03/2007, 14h25
Bisûnûrs

Citation:

Envoyé par SpaceFrog

J'ai le felmem de tester... mais est-ce qu'il dessine en temps réel un tracé en pointillé de la selection ?
peut il aussi gérer le sens du traçage ??

Oui et oui. =)
16/03/2007, 14h41
SpaceFrog

Quand j'aurais un peu de temps de crossbrowseriserait mon code ...
20/03/2007, 14h50
Auteur

Citation:

Envoyé par Bisûnûrs

Comme me l'a fait remarquer DoubleU par MP, pour que ça fonctionne sur Firefox 2 il suffit de remplacer cette ligne :

Code:

document.getElementById('gnia').onmousemove = function(){encours(e)};

par celle-là :

Code:

document.getElementById('gnia').onmousemove = encours;

Affecter de manière dynamique à un événement, une fonction....
La seconde syntaxe qui me laisse vraiment perplexe car je ne comprends absolument pas comment les paramètres de la fonction (ici event) sont transmis... :roll:
Comment le navigateur "sait" que la variable e correspond à l'objet event ??
20/03/2007, 14h59
Bisûnûrs

Citation:

Envoyé par Auteur

Affecter de manière dynamique à un événement, une fonction....
La seconde syntaxe qui me laisse vraiment perplexe car je ne comprends absolument pas comment les paramètres de la fonction (ici event) sont transmis... :roll:
Comment le navigateur "sait" que la variable e correspond à l'objet event ??

Je suppose qu'il doit se débrouiller. :?
Je l'ai testé sur IE6 et FF1.5, je n'ai pas pu le tester sur FF2, mais je n'ai pas vu de problème d'exécution ...
20/03/2007, 17h55
FremyCompany
Citation:

Envoyé par Bisûnûrs

Je suppose qu'il doit se débrouiller. :?
Je l'ai testé sur IE6 et FF1.5, je n'ai pas pu le tester sur FF2, mais je n'ai pas vu de problème d'exécution ...

Mais c'est toi qui le lui dit !!!
Code:

1 2 3 function fnc1(e) { // ... }
ET

Code:

x.onmousemove=fnc1;

FAIT
Code:

1 2 3 x.onmousemove=function fnc1(e) { // ... }
Ensuite, FF fait ceci :

Code:

this.onmousemove(eventArgs);
20/03/2007, 19h43
Auteur
euh.... :koi: :oops:

Si par exemple, j'ai dans mon code HTML :
Code:

1 2 3 4 <div id="monDiv" onmousemove="move(event, this, 'coucou')"> bla bla bla bla bla bla bla bla bla bla </div>
avec move une fonction quelconque qui prend comme paramètre l'objet event, l'objet appelant (this) et une chaine de caractères.
Code:

1 2 3 4 5 function move(e, objet, str) { .... }
Maintenant si j'ai :
Code:

1 2 3 4 <div id="monDiv"> bla bla bla bla bla bla bla bla bla bla </div>
quel serait le code JS qui me permettrait d'affecter à onmousemove la fonction move ?
Code:

1 2 document.getElementById("monDiv").onmousemove= ???
Et comment le navigateur gère l'ensemble ?

FF fait HTMLObjectInstance.onmousemove(eventArgs);
IE fait HTMLObjectInstance.onmousemove(); (event est une variable globale dans window)

Donc dans ton cas il faut passer par une fonction "relais" qui complète les events

Voici le code sous-entendu par FireFox :

Code:

function (event) { move(event, this, "coucou"); }

Et celui par IE :

Code:

function () { move(event, this, "coucou"); }

Pour un code compatible on préférera en général :
Code:

1 2 3 4 function (event) { event = (event?event:window.event); // POUR IE move(event, this, "coucou"); }
A noter qu'il est aussi possible de faire comme ca :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function move(event) { if (!event) { event = window.event; } var objet = this; var str = this.onmousemoveArguments[0]; //... } var o = document.getElementById("id"); o.onmousemove = move; o.onmousemoveArguments=["coucou"];