[SRC] Simulation d'une sélection

**Bisûnûrs** · 20/11/2006, 22h51

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";
&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 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.

**FremyCompany** · 21/11/2006, 21h00

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

**Bisûnûrs** · 22/11/2006, 00h53

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.

**Bisûnûrs** · 14/03/2007, 21h45

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par celle-là :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Merci à lui.

**SpaceFrog** · 16/03/2007, 15h11

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 :

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
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>

**Bisûnûrs** · 16/03/2007, 15h25

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. =)

**SpaceFrog** · 16/03/2007, 15h41

Quand j'aurais un peu de temps de crossbrowseriserait mon code ...

**Auteur** · 20/03/2007, 15h50

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par celle-là :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Comment le navigateur "sait" que la variable e correspond à l'objet event ??

**Bisûnûrs** · 20/03/2007, 15h59

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

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

**FremyCompany** · 20/03/2007, 18h55

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ET

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

x.onmousemove=fnc1;

FAIT

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
x.onmousemove=function fnc1(e) {
   // ...
}

Ensuite, FF fait ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.onmousemove(eventArgs);

**Auteur** · 20/03/2007, 20h43

euh....

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function move(e, objet, str)
{
....
}

Maintenant si j'ai :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("monDiv").onmousemove= ???

Et comment le navigateur gère l'ensemble ?

**FremyCompany** · 21/03/2007, 13h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Et celui par IE :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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"];

[SRC] Simulation d'une sélection

Contribuez

Discussions similaires

Partager

Partager