StopPropagation

**marcha** · 30/01/2009, 11h45

Pas vraiment d'explication, juste une piste peut-être.

Un élément en float établi un nouveau contexte de formatage, le navigateur
doit tenir compte du contenu du float pour déterminer la taille (je sais que
dans ton cas le li semble défini avec une largeur et hauteur fixe) je me demande
si il se lance pas dans une série de calculs pour gérer ça justement.

Tu pourrais donner un code avec une série de <li> qui provoque ce ralentissement
pour que je test ici ?

**le_chomeur** · 30/01/2009, 11h50

dernière version fonctionnelle ( basé sur mon code ... )

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
126
127
128
129
130
131
132
133
134
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Le_chomeur - www.developpez.com" />
<style type="text/css">
			.imageList{
				border:2px solid red;
			}
			.imageList li{
				position:relative;
				overflow:hidden;
				height:120px;
				width:120px;
				border:1px solid #666;
				padding:5px;
				margin:20px;
				float:left;
			}
			.actionImg{
				border-top:1px solid #666;
				border-left:1px solid #666;
				border-right:1px solid #666;
				width:120px;
				display:block;
				height:34px;
				position:absolute;
				left:5px;
				background-color:#666;
				opacity:0.5;
			}
			.centrer{
width:200px;
height:200px;
position:fixed;
margin-left:50%;
left:-100px;
}
		</style>  
<script type="text/javascript">
<!--
var timer = null;
var last = null;
function seeActionImage(elementToSee,voir){
	if (!elementToSee == null || !elementToSee.id) {
		elementToSee = last;
	}
	if(elementToSee != null){
	var MaDiv = elementToSee.getElementsByTagName('div')[0];
	if(timer == null){
		timer = setInterval(function(){new openAction(MaDiv,voir)},10);
	}
	}
 
}
function openAction(MaDiv,voir){
	if(voir && parseInt(MaDiv.style.bottom) < 0){
		MaDiv.style.bottom = parseInt(MaDiv.style.bottom)+4 +"px";
	}
	else if(!voir && parseInt(MaDiv.style.bottom) > -34){
		MaDiv.style.bottom = parseInt(MaDiv.style.bottom)-4 +"px";
	}
	else{
		clearInterval(timer);
		timer = null;
	}
}
 
function getTarget(ev){
	ev = (ev) ? ev:window.event;
	var target = ev.target || ev.srcElement;
	document.getElementById("msg").innerHTML += target.id+" "+target.nodeName+ "<br />";
	objetTemp = getLiParent(target);//document.getElementById("tbl1");
	clearInterval(timer);
	timer = null;
	if(target.nodeName == "IMG" || target.nodeName == "DIV" || target.nodeName =="LI"){
		seeActionImage(objetTemp,true);
	}
	else{
		seeActionImage(objetTemp,false);
	}
}
 
function getLiParent(obj){
	if(obj.nodeName != "LI"){
		while (obj = obj.offsetParent) {
			if(obj.nodeName != "LI" || obj.nodeName != 'UL'){
				break;
			}
	    }
	}
	document.getElementById("msg").innerHTML = obj.id;
	if(obj.id){last = obj}
	return obj;
 
}
//-->
</script>
 
</head>
 
<body>
 
<ul class="imageList" id="laliste">
		<li id="la1">
			<img src="images/im5.jpg" width="120px" />
			<div class="actionImg" style="bottom:-34px;">
				<img src="commentaire.png" width="30px" />
			</div>
		</li>
		<li id="la2">
			<img src="images/im5.jpg" width="120px" />
			<div class="actionImg" style="bottom:-34px;">
				<img src="commentaire.png" width="30px" />
			</div>
		</li>
				<li id="la3">
			<img src="images/im5.jpg" width="120px" />
			<div class="actionImg" style="bottom:-34px;">
				<img src="commentaire.png" width="30px" />
			</div>
		</li>		
		<li style="clear:both;float:none;width:100%;"></li>
		</ul>
 
<div id="msg" class="centrer"></div>
 <script type="text/javascript">
 	document.getElementById("laliste").addEventListener("mouseover", getTarget, false);
 </script>
</body>

juste le float:left a enlevé dans le style pour tester la différence de perf ,

sinon il me reste a créer une instance pour chaque évènement mais ça c'est une autre histoire

mais j'en perd mon latin sur ce bug

**marcha** · 30/01/2009, 13h23

Salut,

Je n'observe pas de différence en terme de performance, j'ai
juste commenté/décommenté le float:left;

Je suis sur FireFox 2 / Linux (et ma machine n'est pas spécialement puissante) :-)

**le_chomeur** · 30/01/2009, 13h55

mince sur ff3 sous xp , c'est très flagrant, si quelqu'un pouvait nous faire un retour ?

**Auteur** · 30/01/2009, 17h55

bon en reprenant les piles d'événements :

Code x :

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />

<style type="text/css">
      .imageList{
        border:2px solid red;
      }
      .imageList li{
        position:relative;
        overflow:hidden;
        height:120px;
        width:120px;
        border:1px solid #666;
        padding:5px;
        margin:5px;
      }
      .actionImg{
        border-top:1px solid #666;
        border-left:1px solid #666;
        border-right:1px solid #666;
        width:120px;
        display:block;
        height:34px;
        position:absolute;
        left:5px;
        background-color:#666;
        opacity:0.5;
      }
</style>  

<script type="text/javascript">
<!--
var tabEvent = new Array("-","-","-","-","-","-","-","-"); //0,1,2,3,4, etc.
var overDiv = false;
 
function razTabEvent()
{
  var i;
  for (i=0; i<tabEvent.length;i++)
    tabEvent[i]="-";
}
 
 
function gestionEv(objet, index)
{   
  var n;
  
  if (index>=1)
    overDiv = true;
    
  if (!overDiv)
    return true;
    
    
  //tabEvent[index] = "("+objet.tagName+")";
  tabEvent[index] = objet;	// on mémorise l'objet qui a déclenché l'événement

    
  if (tabEvent[0]!="-")
  {
    n = 0;
    while (tabEvent[n]!="-" && n<tabEvent.length)
      n++;
    n--; // index du dernier objet qui a déclenché l'événement
  
    switch (n)
    {
      case 0: // index du body
          overDiv = false;
      
      case 1: // index du UL
          action(false);
          document.getElementById("msg").innerHTML += "(on doit plus voir) ";
          break;
		  
      case 2: // index des LI
          action(true);
          document.getElementById("msg").innerHTML += "(over div 1) ";
          break;
		  
      case 3: // index des DIV à afficher - index de l'image contenue dans le LI
          action(true);
          document.getElementById("msg").innerHTML += "(over div 2) ";
          break;
		  
      case 4: // index des images contenues dans les DIV
          action(true);
          document.getElementById("msg").innerHTML += "(over div 3) ";
          break;          
    }
  
    //document.getElementById("msg3").innerHTML += tabEvent+" <br> ";
    
    razTabEvent();
  }
}
 
    var timer = null; 
	var idLI = null;  // pour mémoriser l'id du LI survolé (over)
	
    function action(voir)
	{
	  var elementToSee;
	  try
	  {
		if (voir)
			idLI = tabEvent[2].id; // les LI ont l'index 2
			
	    elementToSee = document.getElementById(idLI);
	    seeActionImage(elementToSee,voir);	
	  }
	  catch(e)
	  {
	  }
	}
 
    
    function seeActionImage(elementToSee, voir)
    {
      //document.getElementById("msg2").innerHTML += "("+voir+" "+ timer + ")";
      
      var MaDiv = elementToSee.getElementsByTagName('div')[0];
	  
	  if (timer!=null)
	  {
        clearInterval(timer);
        timer = null;	  
	  }
	  
      if (timer == null)
      {
        timer = setInterval(function(){openAction(MaDiv, voir)},"10");
      }
    }
	
    function openAction(MaDiv, voir)
    {
      if(voir && parseInt(MaDiv.style.bottom) < 0)
      {
        MaDiv.style.bottom = parseInt(MaDiv.style.bottom)+4 +"px";
      }
      else if(!voir && parseInt(MaDiv.style.bottom) > -34)
      {
        MaDiv.style.bottom = parseInt(MaDiv.style.bottom)-4 +"px";
      }
      else
      {
        clearInterval(timer);
        timer = null;
      }
    }
 
//-->
</script>
 
</head>
 
<body onmouseover="gestionEv(this, 0)">
 
<ul class="imageList" onmouseover="gestionEv(this, 1)">
    <li id="tbl1" onmouseover="gestionEv(this, 2)">
      <img src="images/im5.jpg" width="120px" onmouseover="gestionEv(this, 3)" />
      
      <div class="actionImg" id="laDiv" style="bottom:-34px;" onmouseover="gestionEv(this, 3)">
        <img src="commentaire.png" width="30px" onmouseover="gestionEv(this, 4)" />
      </div>
    </li>
    
    
    <li id="tbl2" onmouseover="gestionEv(this, 2)">
      <img src="images/im5.jpg" width="120px" onmouseover="gestionEv(this, 3)" />
      
      <div class="actionImg" id="laDiv2" style="bottom:-34px;" onmouseover="gestionEv(this, 3)">
        <img src="commentaire.png" width="30px" onmouseover="gestionEv(this, 4)" />
      </div>
    </li>    

    <li id="tbl3" onmouseover="gestionEv(this, 2)">
      <img src="images/im5.jpg" width="120px" onmouseover="gestionEv(this, 3)" />
      
      <div class="actionImg" id="laDiv2" style="bottom:-34px;" onmouseover="gestionEv(this, 3)">
        <img src="commentaire.png" width="30px" onmouseover="gestionEv(this, 4)" />
      </div>
    </li>  
    
</ul>
 
<div id="msg"></div>
<div id="msg2"></div>
<div id="msg3"></div>
 
</body>

Dans ton premier code, tu avais fait des erreurs dans les index des objets : les objets de même niveau ont le même index (cf. les LI par exemple).

J'ai créé une fonction action().

Là tes div s'enroulent et se déroulent correctement... mais il y a encore un bug

C'est quand tu passes d'un élément de la liste à un autre, le div ne s'enroule pas forcément (surtout quand tu vas vite). Ceci à cause du fait que chaque div utilise la variable pour le timer. J'ai essayé d'attribuer un timer pour chaque div (j'avais fait un tableau de timer), sans succès

Peut-être en créant un objet qui aurait son timer et ses fonctions seeActionImage() et openAction(). Un objet sera affecté à chaque div qu'il faut dérouler....

**Auteur** · 30/01/2009, 20h57

voilà

Donne moi ton avis

Code x :

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />

<style type="text/css">
      .imageList{
        border:2px solid red;
      }
      .imageList li{
        position:relative;
        overflow:hidden;
        height:120px;
        width:120px;
        border:1px solid #666;
        padding:5px;
        margin:5px;
      }
      .actionImg{
        border-top:1px solid #666;
        border-left:1px solid #666;
        border-right:1px solid #666;
        width:120px;
        display:block;
        height:34px;
        position:absolute;
        left:5px;
        background-color:#666;
        opacity:0.5;
      }
</style>  

<script type="text/javascript">
<!--
var tabEvent = new Array("-","-","-","-","-"); //0,1,2,3,4, etc.
var overDiv = false;


function razTabEvent()
{
  var i;
  
  for (i=0; i<tabEvent.length;i++)
    tabEvent[i]="-";
}
 
 
function gestionEv(objet, index)
{   
  var n;
  
  if (index>=1)
    overDiv = true;
    
  if (!overDiv)
    return true;
    
    
  //tabEvent[index] = "("+objet.tagName+")";
  tabEvent[index] = objet;	// on mémorise l'objet qui a déclenché l'événement

    
  if (tabEvent[0]!="-")
  {
    n = 0;
    while (tabEvent[n]!="-" && n<tabEvent.length)
      n++;
    n--; // index du dernier objet qui a déclenché l'événement
  
    switch (n)
    {
      case 0: // index du body
          overDiv = false;
      
      case 1: // index du UL
          action(false);
          document.getElementById("msg").innerHTML += "(on doit plus voir) ";
          break;
		  
      case 2: // index des LI
          action(true);
          document.getElementById("msg").innerHTML += "(over div 1) ";
          break;
		  
      case 3: // index des DIV à afficher - index de l'image contenue dans le LI
          action(true);
          document.getElementById("msg").innerHTML += "(over div 2) ";
          break;
		  
      case 4: // index des images contenues dans les DIV
          action(true);
          document.getElementById("msg").innerHTML += "(over div 3) ";
          break;          
    }
  
    //document.getElementById("msg3").innerHTML += tabEvent+" <br> ";
    
    razTabEvent();
  }
}
 
  var idLI = null;  // pour mémoriser l'id du LI survolé (over)
  
  function action(voir)
  {
    var elementToSee;
    var maDiv;
    
    // try catch() car lors de la première exécution du script idLI = null
    // donc document.getElementById(idLI)  peut faire planter le navigateur
    try
    {
      // pour forcer l'enroulement du div si c'est nécessaire
      // si un nouveau div se déroule
      if (idLI!=null)
      {
        elementToSee = document.getElementById(idLI);
        maDiv = elementToSee.getElementsByTagName('div')[0];
        if (maDiv.actionSurDiv!=null)
        {
          if (!maDiv.retourneStatut)
            maDiv.actionSurDiv.seeActionImage(false);
        }
      }
    
      // on mémorise l'id du LI survolé
      if (voir)
        idLI = tabEvent[2].id; // les LI ont l'index 2
      
      
      elementToSee = document.getElementById(idLI);
      maDiv = elementToSee.getElementsByTagName('div')[0];
    
      // on ajoute au div un objet actionDiv si celui-ci n'existe pas
      if (maDiv.actionSurDiv==null)
      {
        maDiv.actionSurDiv = new actionDiv(maDiv);
      }
    
      // on enroule ou on déroule le div
      maDiv.actionSurDiv.seeActionImage(voir);  
    }
    catch(e)
    { }
  }
  
 
var actionDiv = function(elementDiv)
{
    this.timer = null;
    this.MaDiv = elementDiv;
    this.statutDiv = false; // état du div : true => déroulé / false => enroulé
    //document.getElementById("msg2").innerHTML += this.timer+" "+voir;
} 

actionDiv.prototype=
{
    seeActionImage : function (voir)
    {  
      if (this.timer!=null)
      {
        clearInterval(this.timer);
        this.timer = null;    
      }
    
      if (this.timer == null)
      {
        var temp = this;
        this.timer = setInterval(function(){temp.openAction(voir)},"10");
        this.statutDiv = voir;
      }
    }
    ,
    openAction : function (voir)
    {
      //document.getElementById("msg2").innerHTML += this.timer+" "+voir;
    
      if (voir && parseInt(this.MaDiv.style.bottom) < 0)
      {
        this.MaDiv.style.bottom = parseInt(this.MaDiv.style.bottom)+4 +"px";
      }
      else if(!voir && parseInt(this.MaDiv.style.bottom) > -34)
      {
        this.MaDiv.style.bottom = parseInt(this.MaDiv.style.bottom)-4 +"px";
      }
      else
      {
        clearInterval(this.timer);
        this.timer = null;
      }
    }
    ,
    retourneStatut : function()
    {
      return this.statutDiv;
    }
}

//-->
</script>
 
</head>
 
<body onmouseover="gestionEv(this, 0)">
 
<ul class="imageList" onmouseover="gestionEv(this, 1)">
    <li id="tbl1" onmouseover="gestionEv(this, 2)">
      <img src="images/im5.jpg" width="120px" onmouseover="gestionEv(this, 3)" />
      
      <div class="actionImg" id="laDiv" style="bottom:-34px;" onmouseover="gestionEv(this, 3)">
        <img src="commentaire.png" width="30px" onmouseover="gestionEv(this, 4)" />
      </div>
    </li>
    
    
    <li id="tbl2" onmouseover="gestionEv(this, 2)">
      <img src="images/im5.jpg" width="120px" onmouseover="gestionEv(this, 3)" />
      
      <div class="actionImg" id="laDiv2" style="bottom:-34px;" onmouseover="gestionEv(this, 3)">
        <img src="commentaire.png" width="30px" onmouseover="gestionEv(this, 4)" />
      </div>
    </li>    

    <li id="tbl3" onmouseover="gestionEv(this, 2)">
      <img src="images/im5.jpg" width="120px" onmouseover="gestionEv(this, 3)" />
      
      <div class="actionImg" id="laDiv2" style="bottom:-34px;" onmouseover="gestionEv(this, 3)">
        <img src="commentaire.png" width="30px" onmouseover="gestionEv(this, 4)" />
      </div>
    </li>  
    
</ul>
 
<div id="msg"></div>
<div id="msg2"></div>
<div id="msg3"></div>
 
</body>

Pour chaque div, j'ajoute un objet actionDiv comme ça chaque div a son timer et ses méthodes

Néanmoins avec cet objet, même si l'enroulement / déroulement des div est plus rapide, il se peut que des événements mouseover ne se produisent pas et donc le div peut rester déroulé quand on passe sur l'élément suivant. Du coup dans la fonction action() j'ai rajouté des lignes de code pour forcer l'enroulement du div qui a été déroulé précédemment.

On peut sans doute simplifier un peu le code

**le_chomeur** · 30/01/2009, 23h43

okip je regarde dès demain

( dans ma dernière version posté je crois ^^ ) j'ai justement gèrer par objet

)

je regarde demain car la vendredi a 00H pas super motivé lol merci Auteur

décidément ce stop propagation

**marcha** · 31/01/2009, 00h33

Envoyé par le_chomeur

je regarde demain car la vendredi a 00H pas super motivé lol merci Auteur

Ouch :-) moi j'étais motivé, voici une proposition

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Le_chomeur - www.developpez.com" />
<style type="text/css">
.imageList{
	border:2px solid red;
	overflow:hidden;
}
.imageList li{
	position:relative;
	overflow:hidden;
	height:120px;
	width:120px;
	border:1px solid #666;
	padding:5px;
	margin:20px;
	float:left;
}
.actionImg{
	border-top:1px solid #666;
	border-left:1px solid #666;
	border-right:1px solid #666;
	width:120px;
	display:block;
	height:34px;
	position:absolute;
	left:5px;
	background-color:#666;
	opacity:0.5;
}
.centrer{
	width:200px;
	height:200px;
	position:fixed;
	margin-left:50%;
	left:-100px;
}
</style>  
<script type="text/javascript">
<!--
function Animator(e) {
 
	var timer = false;
	var step = 0;
	var MaDiv = e.getElementsByTagName('div')[0];
	var height = MaDiv.offsetHeight;
	var pos = -height;
 
	var limit = function(p) { 
		pos = p; 
		clearInterval(timer); 
		timer = false; 
	};
 
	var animate = function() {
		pos += step;
		if(pos<=-height) limit(-height);
		if(pos>=0) limit(0);
		MaDiv.style.bottom = pos + "px";
	};
 
	var init = function(s) {
		step = s;
		if(!timer) timer = setInterval(animate, 10);
	};
 
	var addEvent = function(elem, evType, fn) {
		if(elem.addEventListener) elem.addEventListener(evType, fn, false);
		else if (elem.attachEvent) elem.attachEvent("on"+evType, fn);
	};
 
	addEvent(e, 'mouseover', function(event) { 
		event = event || window.event;
		if(event.stopPropagation) event.stopPropagation(); 
		else event.cancelBubble = true;
		init(4);
	});
 
	addEvent(e.parentNode, 'mouseover', function(event) { init(-4);	});
}
 
//-->
</script>
 
</head>
 
<body>
 
<ul class="imageList" id="laliste">
		<li class='anim'>
			<img src="images/im5.jpg" width="120px" />
			<div class="actionImg" style="bottom:-34px;">
				<img src="commentaire.png" width="30px" />
			</div>
		</li>
		<li class='anim'>
			<img src="images/im5.jpg" width="120px" />
			<div class="actionImg" style="bottom:-34px;">
				<img src="commentaire.png" width="30px" />
			</div>
		</li>
		<li class='anim'>
			<img src="images/im5.jpg" width="120px" />
			<div class="actionImg" style="bottom:-34px;">
				<img src="commentaire.png" width="30px" />
			</div>
		</li>		
		<li style="clear:both;float:none;width:100%;"></li>
		</ul>
 
<div id="msg" class="centrer"></div>
<script type="text/javascript">
	var liste = document.getElementById("laliste");
	var lis = liste.getElementsByTagName('li');
	for(var i=0;i<lis.length;i++) if(lis[i].className=='anim') new Animator(lis[i]);
</script>
</body>
</html>

**le_chomeur** · 31/01/2009, 12h12

bingo !!

Merci à vous deux ! c'est rare que je galère comme ça !

Auteur ta solution fonctionne pas mal du tout !!

Marcha ... Code nickel , fonctionne parfaitement sous ie et FF ( pas testé sous ie6 ) ==> je garde ^^

Encore un gros bravo et merci a vous deux

je pense qu'à l'occasion je ferais un tutoriel / cours sur les événements ça pourrait être utile

Sujet résolut :p

**Auteur** · 31/01/2009, 18h46

Marcha a fait ce que je pensais faire à savoir associer à chaque LI un objet qui gère l'animation du div (ce qui rend chaque objet indépendant)

Pour ce qui est de mon script, on peut simplifier le code HTML : les événements onmouseover dans les éléments contenus dans les LI sont inutiles :

Code x :

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="- www.developpez.com" />

<style type="text/css">
      .imageList{
        border:2px solid red;
      }
      .imageList li{
        position:relative;
        overflow:hidden;
        height:120px;
        width:120px;
        border:1px solid #666;
        padding:5px;
        margin:5px;
      }
      .actionImg{
        border-top:1px solid #666;
        border-left:1px solid #666;
        border-right:1px solid #666;
        width:120px;
        display:block;
        height:34px;
        position:absolute;
        left:5px;
        background-color:#666;
        opacity:0.5;
      }
</style>  

<script type="text/javascript">
<!--
var tabEvent = new Array("-","-","-"); //0,1,2
var overDiv = false;


function razTabEvent()
{
  var i;
  
  for (i=0; i<tabEvent.length;i++)
    tabEvent[i]="-";
}
 
 
function gestionEv(objet, index)
{   
  var n;
  
  if (index>=1)
    overDiv = true;
    
  if (!overDiv)
    return true;
    
    
  //tabEvent[index] = "("+objet.tagName+")";
  tabEvent[index] = objet;	// on mémorise l'objet qui a déclenché l'événement

    
  if (tabEvent[0]!="-")
  {
    n = 0;
    while (tabEvent[n]!="-" && n<tabEvent.length)
      n++;
    n--; // index du dernier objet qui a déclenché l'événement
  
    switch (n)
    {
      case 0: // index du body
          overDiv = false;
      case 1: // index du UL
          action(false);
          break;
      case 2: // index des LI	  
          action(true);
          break;          
    }
  
    //document.getElementById("msg3").innerHTML += tabEvent+" <br> ";
    
    razTabEvent();
  }
}
 
  var idLI = null;  // pour mémoriser l'id du LI survolé (over)
  
  function action(voir)
  {
    var elementToSee;
    var maDiv;
    
    // try catch() car lors de la première exécution du script idLI = null
    // donc document.getElementById(idLI)  peut faire planter le navigateur
    try
    {
      // pour forcer l'enroulement du div si c'est nécessaire
      // si un nouveau div se déroule
      if (idLI!=null)
      {
        elementToSee = document.getElementById(idLI);
        maDiv = elementToSee.getElementsByTagName('div')[0];
        if (maDiv.actionSurDiv!=null)
        {
          if (!maDiv.retourneStatut) // si le div est ouvert on le cache
            maDiv.actionSurDiv.seeActionImage(false);
        }
      }
    
      // on mémorise l'id du LI survolé
      if (voir)
        idLI = tabEvent[2].id; // les LI ont l'index 2 dans la table des événements
      
      
      elementToSee = document.getElementById(idLI);
      maDiv = elementToSee.getElementsByTagName('div')[0];
    
      // on ajoute au div un objet actionDiv si celui-ci n'existe pas
      if (maDiv.actionSurDiv==null)
      {
        maDiv.actionSurDiv = new actionDiv(maDiv);
      }
    
      // on enroule ou on déroule le div
      if (maDiv.retourneStatut!=voir) // inutile de faire x fois la même action
        maDiv.actionSurDiv.seeActionImage(voir);  
    }
    catch(e)
    { }
  }
  
 
var actionDiv = function(elementDiv)
{
    this.timer = null;
    this.MaDiv = elementDiv;
    this.statutDiv = false; // état du div : true => déroulé / false => enroulé
    //document.getElementById("msg2").innerHTML += this.timer+" "+voir;
} 

actionDiv.prototype=
{
    seeActionImage : function (voir)
    {  
      if (this.timer!=null)
      {
        clearInterval(this.timer);
        this.timer = null;    
      }
    
      if (this.timer == null)
      {
        var temp = this;
        this.timer = setInterval(function(){temp.openAction(voir)},"10");
        this.statutDiv = voir;
      }
    }
    ,
    openAction : function (voir)
    {
      //document.getElementById("msg2").innerHTML += this.timer+" "+voir;
    
      if (voir && parseInt(this.MaDiv.style.bottom) < 0)
      {
        this.MaDiv.style.bottom = parseInt(this.MaDiv.style.bottom)+4 +"px";
      }
      else if(!voir && parseInt(this.MaDiv.style.bottom) > -34)
      {
        this.MaDiv.style.bottom = parseInt(this.MaDiv.style.bottom)-4 +"px";
      }
      else
      {
        clearInterval(this.timer);
        this.timer = null;
      }
    }
    ,
    retourneStatut : function()
    {
      return this.statutDiv;
    }
}
//-->
</script>
 
</head>
 
<body onmouseover="gestionEv(this, 0)">
 
<ul class="imageList" onmouseover="gestionEv(this, 1)">
    <li id="tbl1" onmouseover="gestionEv(this, 2)">
      <img src="images/clair19.jpg" width="120px" />
      
      <div class="actionImg" id="laDiv" style="bottom:-34px;">
        <img src="images/i2.gif" width="30px" />
      </div>
    </li>
    
    
    <li id="tbl2" onmouseover="gestionEv(this, 2)">
      <img src="images/clair19.jpg" width="120px" />
      
      <div class="actionImg" id="laDiv2" style="bottom:-34px;">
        <img src="images/i1.gif" width="30px" />
      </div>
    </li>    

    <li id="tbl3" onmouseover="gestionEv(this, 2)">
      <img src="images/clair19.jpg" width="120px" />
      
      <div class="actionImg" id="laDiv2" style="bottom:-34px;">
        <img src="images/i7.gif" width="30px" />
      </div>
    </li>  
    
</ul>

<div id="msg"></div>
<div id="msg2"></div>
<div id="msg3"></div>
 
</body>

ce qui simplifie également (un tout petit peu certes

) une partie du code javascript : il y avait redondance du code dans le switch()...case de la fonction gestionEv().

Ce qui est intéressant dans ces scripts c'est que l'on peut simuler un onmouseout avec onmouseover

Et aucun des codes présentés utilise l'événement onmouseout

**marcha** · 31/01/2009, 18h54

Envoyé par Auteur

Et aucun des codes présentés utilise l'événement onmouseout

Oui en effet :-) il semble prise de tête de le gérer puisqu'il se produit
pas uniquement à la sortie "géographique" du LI, mais si quelqu'un a
une idée pour gérer ça avec le onmouseout je suis preneur.

**le_chomeur** · 31/01/2009, 20h10

La solution est justement d'annihiler le mouseover et mouseout des éléments enfants

qui en fait feront office en même temps d'annihiler le mouseout du parent :-) ( oui c casse tête ;-) ) j'ai déja essayé , mais je ne sais pas pourquoi , il y a un problème dans le mouseout de sortie du parent ... si besoins je vous posterais un exemple complet...

Il serait intéressant d'étudier le sujet car a chaque fois on arrive a trouver des solution en "bidouillant" même si le résultat est nickel ( marcha , auteur si vous m'entendez

) pour également pouvoir expliquer et apréhender corectement le principe de stoppropagation et cancelbuble

**Auteur** · 01/02/2009, 00h57

onmouseover et onmouseout sont des événements que tout oppose qui vont de paire

Donc a priori si on gère l'un on peut difficilement gérer l'autre...

StopPropagation

JavaScript

Discussions similaires

Partager

Partager