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

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

[SRC] Simulation d'une sélection

Contribuez

Vue hybride

Discussions similaires

Partager

Partager