Gérer un même évenement sur des div imbriqués.

Bonjour tout le monde.

J'aurai besoin d'une indication sur la manière de gérer un événement identique sur des div imbriquer.

explication:
j'ai une div principale id = P

et dans cette div P :
-1 image id = i
-4 div id = s1, s2, s3, s4.

sur la div P, un mouseOver rend s1, s2, s3 et s4 visible car par défautl ils sont en hidden.

et je voudrais associer sur chacune des div s1, s2, s3 et s4 le même evenement onMouseOver pour pouvoir par exemple changer la couleur de fond de l'image ou ajouter un signe distinctif pour que l'on sache que l'on est bien sur cette div et ensuite lui associer un OnMouseUp pour inscrire son id dans un Input Text.

Mon problème est que seul le OnMouveOver de P est pris en compte...et ceux de s1, s2, s3 et s4 sont totalement ignoré...

Y a t'il quelque chose A faire pour arrangé celà ou est-ce impossible tout simplement ?

Merci pour votre aide, bonne journée.

bonjour,

Citation:

Envoyé par snake-09

sur la div P, un mouseOver rend s1, s2, s3 et s4 visible car par défautl ils sont en hidden.

ok....

Citation:

Envoyé par snake-09

et je voudrais associer sur chacune des div s1, s2, s3 et s4 le même evenement onMouseOver pour pouvoir par exemple changer la couleur de fond de l'image ou ajouter un signe distinctif pour que l'on sache que l'on est bien sur cette div et ensuite lui associer un OnMouseUp pour inscrire son id dans un Input Text.

Mon problème est que seul le OnMouveOver de P est pris en compte...et ceux de s1, s2, s3 et s4 sont totalement ignoré...

euh là je n'ai rien compris :aie:
En plus l'événement OnMouseUp n'existe pas :? As-tu un bout de code ?

oui j'ai un bout de code :

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
 
function new_comp(type,num){
 
nbs++;
 
	div = document.createElement("div");
	div.ondblclick=function(){this.parentNode.removeChild(this); contenu.splice('nbs',1);idContenu.splice('nbs',1);};
 
	div.class=type;
	div.id = (type+num);
	var divID= div.id;
	div.style.position= "absolute";
	div.style.top="0px";
	div.style.left="opx";
	div.style.width="185px";
	div.style.hight="150px";
	new Draggable(div);
 
	switch (type){
 
					case "pc":
						var ip1 = div.id +"ip1";
						var ip2 = div.id +"ip2";
						var ip3 = div.id +"ip3";
						var ip4 = div.id +"ip4";
 
						var nm1 = div.id +"nm1";
						var nm2 = div.id +"nm2";
						var nm3 = div.id +"nm3";
						var nm4 = div.id +"nm4";
 
						var gw1 = div.id +"gw1";
						var gw2 = div.id +"gw2";
						var gw3 = div.id +"gw3";
						var gw4 = div.id +"gw4";
 
						div.innerHTML = '<p>'+div.id+'<br><img src="./images/pc.png" style="cursor:hand;"><div id="info'+div.id+'" style="visibility:hidden" ><br>@ip-s1: <input id="'+ip1+'" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'" maxlength="3" value="255"><br>masque: <input id="'+nm1+'" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"></div></p>'
						div.setAttribute('OnMouseUp','set_Comp_To_Link(this.id)');
						document.getElementById("monReseau").appendChild(div);
 
					break;
 
					case "routeur":
						var ip1 = div.id +"ip1";
						var ip2 = div.id +"ip2";
						var ip3 = div.id +"ip3";
						var ip4 = div.id +"ip4";
 
						var nm1 = div.id +"nm1";
						var nm2 = div.id +"nm2";
						var nm3 = div.id +"nm3";
						var nm4 = div.id +"nm4";
 
						var gw1 = div.id +"gw1";
						var gw2 = div.id +"gw2";
						var gw3 = div.id +"gw3";
						var gw4 = div.id +"gw4";
 
						div.innerHTML = '<p>'+div.id+'<br><img src="./images/routeur.png"><div id="info'+div.id+'" style="visibility:hidden"><div id="'+div.id+'slot1" style="visibility:hidden" ><br>@ip-s1: <input id="'+ip1+'s1" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s1" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s1" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s1" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s1" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s1" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s1" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s1" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"></div><br>@ip-s2: <input id="'+ip1+'s2" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s2" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s2" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s2" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s2" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s2" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s2" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s2" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"><br>@ip-s3: <input id="'+ip1+'s3" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s3" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s3" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s3" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s3" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s3" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s3" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s3" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"><br>@ip-s4: <input id="'+ip1+'s4" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s4" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s4" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s4" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s4" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s4" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s4" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s4" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"></div></p>'
						div.setAttribute('OnMouseUp','set_Comp_To_Link(this.id)');
						document.getElementById("monReseau").appendChild(div);
 
					break;
 
					case "routeurSf":
						var ip1 = div.id +"ip1";
						var ip2 = div.id +"ip2";
						var ip3 = div.id +"ip3";
						var ip4 = div.id +"ip4";
 
						var nm1 = div.id +"nm1";
						var nm2 = div.id +"nm2";
						var nm3 = div.id +"nm3";
						var nm4 = div.id +"nm4";
 
						var gw1 = div.id +"gw1";
						var gw2 = div.id +"gw2";
						var gw3 = div.id +"gw3";
						var gw4 = div.id +"gw4";
 
						div.innerHTML = '<p>'+div.id+'<br><img src="./images/routeurSf.png"><div id="info'+div.id+'"style="visibility:hidden"><br>@ip-s1: <input id="'+ip1+'s1" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s1" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s1" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s1" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s1" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s1" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s1" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s1" type="text"size="1" maxlength="3" value="255"><br>@ip-s2: <input id="'+ip1+'s2" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s2" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s2" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s2" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s2" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s2" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s2" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s2" type="text"size="1" maxlength="3" value="255"><br>@ip-s3: <input id="'+ip1+'s3" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s3" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s3" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s3" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s3" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s3" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s3" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s3" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"><br>@ip-s4: <input id="'+ip1+'s4" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s4" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s4" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s4" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s4" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s4" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s4" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s4" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"></div></p>'
						div.setAttribute('OnMouseUp','set_Comp_To_Link(this.id)');
						document.getElementById("monReseau").appendChild(div);
					break;
 
					case "internet":
						div.innerHTML = '<img src="./images/internet.png">'
						div.setAttribute('OnMouseUp','set_Comp_To_Link(this.id)');
						document.getElementById("monReseau").appendChild(div);
					break;
	}
 
						div.setAttribute('OnMouseOver', 'display("info"+this.id,"v")');
						div.setAttribute('OnMouseOut', 'display("info"+this.id,"nv")');
 
contenu.push(div.class);
idContenu.push(div.id);
 
 
}

voilà pour le moment j'ai ça qui marche .

maintenant je voudrai modifier ça pour ajouter un onMouseOver et un onMouseUp sur les div

Code:

1
2
3
4
5
 
<div id="'+div.id+'slot1" style="visibility:hidden" >
<div id="'+div.id+'slot2" style="visibility:hidden" >
<div id="'+div.id+'slot3" style="visibility:hidden"  >
<div id="'+div.id+'slot4" style="visibility:hidden" >

dans la partie routeur

afin de les rendre visible individuelement (avec le onMouseOver)et de pouvoir y cliquer individuelement pour renvoyer l'id de la div visible et pas l'id de la div générale( avec le onMouseUp).

Je ne peut pas mettre un onMouseClick car il est déjà utiliser pour selectioner l'objet que je déplace. Le onMouseUp me permet de lancer une action lorsque je relache la souris, ce qui du point de vu d'un utilisateur revien a click sur la souris.

merci de ton aide.