Selection multiple d'images

**Dator** · 07/04/2008, 19h21

Bonjour à tous,

Je vous explique mon problème : Je cherche à réaliser un script en javascript qui permet de sélectionner plusieurs images dans un ensemble d'images en appuyant sur control et en sélectionner plusieurs en cliquant sur la touche ALT (comme sur tous les OS).

Je ne vois pas du tout comment faire, récupérer les évenements sur les touches ALT et CTRL ne me semble pas compliquer mais c'est le reste qui me semble plus complex.

Quelqu'un pourrais m'indiquer une librairie qui à déjà utilisé un tel système ou alors m'expliquer comment faire ce que je souhaite.

Merci à tous !

Clément

**julien.63** · 07/04/2008, 19h56

salut,
voici une première ébauche qui permet d'écouter les clics sur la page.
Il faut rajouter entre autre la détection de la touche ctrl.

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
 
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="PHPEclipse 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>title</title>
<script language="javascript">
 
function Listen(e){
    if (!e) var e = window.event
    if (e.target) targ = e.target
    else if (e.srcElement) targ = e.srcElement
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode
    var tname
    tname=targ.tagName
    id = targ.id;
    if (tname = "IMG")	
    	alert("You clicked on a image element width id=" + id)
    else
    	alert("You clicked on a " + tname + " element width id=" + id)
}
</script>
 
</head>
 
<body onmousedown="Listen(event)">
 
<a href="javascript:void(0);" onclick="test();">test</a>
<img src="" width="400" height="400" id="img1"/>
<img src="" width="400" height="600" id="img2"/>
</body>
</html>

**knoodrake** · 07/04/2008, 20h04

Bonjour, juste une précision: sous linux ( ou plutôt gnome en tout cas ) ALT+Click sert à bouger les fenêtres, et c'est MAJ qui sert à sélectionner une plage de fichiers (pense-y, en modifiant la touche incriminé selon l'OS détecté par exemple).

**julien.63** · 07/04/2008, 20h17

salut, voici une version un peu améliorée. La gestion du ctrl ne gère pas l'os comme le suggère knoodrake... (ceci dit je suis gnome et j'utilise la touche ctrl pour faire une sélection non contigue)

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
 
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="PHPEclipse 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>title</title>
<script language="javascript">
<!--
var img = new Array();
var div;
 
function init(){
	div = document.getElementById("select");
}
 
function Listen(e){
    if (!e) var e = window.event
    if (e.target) targ = e.target
    else if (e.srcElement) targ = e.srcElement
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
    var tname;
    tname=targ.tagName;
    id = targ.id;
    if (tname == "IMG"){	
    	record(id,e.ctrlKey);
    }
}
 
function record(id,ctrl){
	if ( (img.indexOf(id) == -1) && ctrl){
		img.push(id);
	}
	else if (!ctrl){
		img = new Array(id);
	}
	showArray();
}
 
function showArray(){
	div.innerHTML = "";
	for(i=0; i < img.length; i++){
		div.innerHTML += img[i] + "<br>";
	}
}
-->
</script>
 
</head>
 
<body onmousedown="Listen(event)" onload="init()">
<div id="select"></div> 
<a href="javascript:void(0);" >test</a>
<img src="" width="400" height="400" id="img1"/>
<img src="" width="400" height="600" id="img2"/>
</body>
</html>

**Dator** · 09/04/2008, 10h35

Merci à vous !

Enfaite je viens de trouver ce que je recherche exactement.
Dans la librairie Ext JS (qui est très bonne d'ailleur), il y a un exemple :

http://extjs.com/deploy/dev/examples...data-view.html

Ici les touche CTRL et SHIFT sont très bien employées et c'est ce que je recherche !

Si vous avez une idée ou un morceau de code qui pourrais m'aider, je vous en remercie d'avance !

Merci ,

Clément

**julien.63** · 09/04/2008, 11h37

Si vous avez une idée ou un morceau de code qui pourrais m'aider, je vous en remercie d'avance !

un code de quoi puisque tu dis avoir trouvé ce que tu cherchais?

Selection multiple d'images

JavaScript

Vue hybride

Discussions similaires

Partager

Partager