Selection multiple d'images

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

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, 18h56

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, 19h04

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, 19h17

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, 09h35

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, 10h37

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?

**madevilts** · 09/04/2008, 10h45

Pour ce qui est du ALT, je ne vois pas trop à quoi il sert lors d'une sélection multiple... Ctrl et Shift oui mais ALT...

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

@madevilts : Oui tu as raison, je me suis trompé, désolé de vous avoir mis sur la mauvaise voie.

@julien.63 : Je n'ai pas trouvé

J'aimerais juste savoir si il existe un script qui permet d'avoir les même fonctions (CTRL, CTRL SHIFT) afin de selectionner une ou plusieurs choses en même temps

Merci beaucoup à tous !

Clément

**madevilts** · 09/04/2008, 11h41

tu peux faire un onkeydown qui va changer une variable flag que tu peux intéroger à chacun des onclick

Selection multiple d'images

JavaScript

Discussions similaires

Partager

Partager