StopPropagation

Version imprimable

StopPropagation

Salut a tous , bon j'aurais besoins d'un coup de main , je cherche a anihiler le survol sur une div mais malgrès l'appel de l'évènement , l'action définit dans la li mètre est appelée voici le 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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.imageList{
				width:120px;
			}
			.imageList li{
				position:relative;
				overflow:hidden;
				height:120px;
				border:1px solid #666;
			}
			.actionImg{
				border-top:1px solid #666;
				width:100%;
				display:block;
				height:34px;
				position:absolute;
				left:0px;
			}
		</style>
 
		<script type="text/javascript">
			var timer = null;
			function seeActionImage(elementToSee,voir){
				var MaDiv = elementToSee.getElementsByTagName('div')[0];
				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;
				}
			}
 
 
			function load() {
				elem2 = document.getElementById("tbl1");
				elem2.addEventListener("mouseover", stopEvent, false);
				elem2.addEventListener("mouseout", stopEvent, false);
			}
 
			function stopEvent(ev) {
			  //On stop les évènements pour les enfants
			  ev.stopPropagation();
			  document.getElementById('debug').innerHTML += "<br />"+ev.type ;
			}
 
		</script>
	</head>
	<body onload="load()">
		<ul class="imageList">
		<li onmouseover="seeActionImage(this,true);" onmouseout="seeActionImage(this,false);" id="tbl1">
			<img src="images/im5.jpg" width="120px" />
			<div class="actionImg" id="laDiv" style="bottom:-34px;">
				<img src="commentaire.png" width="30px" />
			</div>
		</li>
		</ul>
		<div id="debug"></div>
	</body>
</html>

je souhaite au final pouvoir survolé mon image , et que la barre en bas apparaisse et clické sur les icones ... la barre de menu ne doit partir qu' mouseout du li ...

Salut,

Joli casse-tête :-)

J'ai pas trouvé de solution propre avec stopPropagation, il serait éventuellement
possible de retarder les mouseout de quelques milisecondes et les annuler si
il y a un mouseover rapproché.

J'ai essayé d'assigner mouseover mouseout a tous les enfants et de faire un
stopPropagation mais on a le même problème.

Alors j'ai cherché dans une autre voie, que voici:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.imageList{
				width:120px;
			}
			.imageList li{
				position:relative;
				overflow:hidden;
				height:120px;
				border:1px solid #666;
				background-color: #ff0;
			}
			.actionImg{
				border-top:1px solid #666;
				width:100%;
				display:block;
				height:34px;
				position:absolute;
				left:0px;
			}
		</style>
 
		<script type="text/javascript">
			var timer = null;
			var old_in = false;
 
			function seeActionImage(event) {
				var obj = event.target;
				while(obj && obj.nodeName!='LI') obj = obj.parentNode;
				var px = obj.offsetLeft;
				var py = obj.offsetTop;
				var mx = event.pageX - px;
				var my = event.pageY - py;
				var is_in = mx>=0 && my>=0 && mx<obj.offsetWidth && my<obj.offsetHeight;
				document.getElementById('debug').innerHTML = is_in + ' ' + mx + ' ' + my + ' ' + obj.offsetWidth + "<br />";
				if(is_in != old_in) {				
				  var MaDiv = obj.getElementsByTagName('div')[0];
				  if(timer) clearInterval(timer);
				  timer = setInterval(function(){openAction(MaDiv, is_in)},10);
			      old_in = is_in;
				}
			}
 
			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 load() {
				var e = document.getElementById('tbl1');
				e.addEventListener("mouseover", seeActionImage, false);
				e.addEventListener("mouseout", seeActionImage, false);
			}
 
		</script>
	</head>
	<body onload="load()">
		<ul class="imageList">
		<li id="tbl1">
			<img src="images/im5.jpg" width="120px" />
			<div class="actionImg" id="laDiv" style="bottom:-34px;">
				<img src="commentaire.png" width="30px" />
			</div>
		</li>
		</ul>
		<div id="debug"></div>
	</body>
</html>

29/01/2009, 15h52
SpaceFrog

et cancelBubble ?

cancelBuble , m'a posé quelque soucis sous ie ( va savoir pourquoi ^^ )

voila ou j'en suis :

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.imageList{
 
			}
			.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 timer = null;
			function seeActionImage(elementToSee,voir){
				var MaDiv = elementToSee.getElementsByTagName('div')[0];
				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;
				}
			}
 
 
			function load() {
 
				      var div=document.getElementById("tbl1");
      				  div.addEventListener("mouseover", over1, false);
                      div.addEventListener("mouseout", out1, false);
 
			}
 
			function out1(e) {
          // compatibilité
          if (!e) var e = window.event;
 
          // élément duquel on arrive 
          var tg = (window.event) ? e.srcElement : e.target;
          if (tg.id != 'tbl1') {
              return;
          }
 
          // élément vers lequel on va
          var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
          while (reltg != tg && reltg.nodeName != 'BODY') {
              reltg = reltg.parentNode
          }
 
          // ?
          if (reltg == tg) {
              return;
          }
 
          // action
          seeActionImage(this,false)
          document.getElementById("debug").innerHTML += " (div out)";
      }
 
      function over1(e) {
          // action
        seeActionImage(this,true)
        document.getElementById("debug").innerHTML += " (div over)";
 
        //On stop la propagation de tous les éléments enfant
        if(e.cancelBubble)
        {
              e.cancelBubble = true;
        }
        else {
              e.stopPropagation();
        }
 
        return;
      }
 
		</script>
	</head>
	<body onload="load()">
		<ul class="imageList">
		<li id="tbl1">
			<img src="images/im5.jpg" width="120px" />
			<div class="actionImg" id="laDiv" style="bottom:-34px;">
				<img src="commentaire.png" width="30px" />
			</div>
		</li>
		</ul>
		<div id="debug"></div>
	</body>
</html>

obligé de laissé un espace a l'intérieur du li sinon le mouseout n'est pas pris en compte.

j'avais déja pensé a gérer un timer selon le mouse over mais difficilement gérable a terme car il y auras jusqu'à une centaine d'éléments sur la page ;)

29/01/2009, 16h29
franculo_caoulene

Pas le temps et pas sûr d'avoir bien compris le problème. Ca ne peut pas aider : http://www.quirksmode.org/js/events_mouse.html?
29/01/2009, 16h35
le_chomeur

ça y ressemble mais c'est quasiement ce que j'ai fait , je crois qu'il faut que je regarde également du coté du targetElement ... ;(

il me semble justement qui'l faut double cancelBubble de stopPropagation

Code:

1
2
3
4
5
6
7
8
9
10
11
function stopLis(){
var AllLis=document.getElementsByTagName('li');
alert(AllLis.length)
for(j=0;AllLis[j];j++){
      AllLis[j].onclick=function(evt){
			  		evt=(evt)?evt:window.event;
			  		if (evt.stopPropagation) {evt.stopPropagation();}
					else{evt.cancelBubble = true;}
					}
		}
}

29/01/2009, 16h45
marcha

Je pense qu'avant de rendre tout ça crossbrowser il faudrait trouver une solution
sur FireFox. Le problème est assez bien expliqué dans le link de franculo_caoulene

Le déclenchement d'un mouseover sur le LI alors qu'on est géographiquement
déjà dessus et le premier problème à régler à mon avis.
29/01/2009, 16h49
le_chomeur

le code présenté un peux plus haut fonctionne a 90% , mais le problème du mouseout sur le li se pose si l'on va trop lentement :-/ d'ou voir avec un targetElement au moment ou l'on rentre et un autre au moment ou l'on est certain que l'on sort du li ...

sinon encore plus trash , vérifier , si le targetElement est un enfant du li si oui ne rien faire , si on est sur le li ne rien faire , sinon lancer le mouseout , qu'en pensez vous ?
29/01/2009, 16h52
Auteur
bonjour,

peut-être que ces discussions répondront à ton problème ?

onmouseover / onmouseout sur des éléments imbriqués : plus précisément :
OnMouseOut dans div avec boutons

2 ondblclick sur une même ligne, en court-circuiter 1

J'utilise des flag et des timer...
29/01/2009, 17h01
le_chomeur

effectivement je me souviens de ce thread ;)

tu étais justement partit sur la gestion des éléments :)
mais dans mon cas ça va être TRES lourd si je met ça en place => jusqu'a une 100 ( voir plus ) de li sur la page contenant X éléments ...

mais je vais tester quand même :)
29/01/2009, 17h15
Auteur

Citation:

Envoyé par le_chomeur

effectivement je me souviens de ce thread ;)

tu étais justement partit sur la gestion des éléments :)
mais dans mon cas ça va être TRES lourd si je met ça en place => jusqu'a une 100 ( voir plus ) de li sur la page contenant X éléments ...

mais je vais tester quand même :)

Dans un des exemples ("message 41") je créais dynamiquement 20 div imbriqués (les événements étant ajoutés de manière dynamique également), je n'ai pas rencontré de soucis à l'époque (IE7 et FF).
Bon il est vrai que pour une centaine d'éléments cela peut poser souci notamment sous IE (crash).

Ensuite comme j'ai indiqué dans un des liens, tu n'es pas obligé de gérer à la fois le onmousover et le onmouseout des éléments enfants car un onmouseover sur un élément enfant correspond à un onmouseout sur l'élément parent ;) Donc ça te ferait des événements en moins à gérer :)

il est vrai ;) , mais il subsiste des bugs :

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
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
 
<!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
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+")";
  if (tabEvent[0]!="-")
  {
    n = 0;
    while (tabEvent[n]!="-" && n<tabEvent.length)
      n++;
    n--;
  objetTemp = document.getElementById("tbl1");
  timer == null;
    switch (n)
    {
      case 0:
          overDiv = false;
 
 
          seeActionImage(objetTemp,false);
		  document.getElementById("msg").innerHTML += "(on doit plus voir) ";
          break;
      case 1:
          seeActionImage(objetTemp,true);
		  document.getElementById("msg").innerHTML += "(over div 1) ";
          break;
      case 2:
	  	  seeActionImage(objetTemp,true);
          document.getElementById("msg").innerHTML += "(over div 2) ";
          break;
      case 3:
	  seeActionImage(objetTemp,true);
          document.getElementById("msg").innerHTML += "(over div 3) ";
          break;
      case 4:
	  seeActionImage(objetTemp,true);
          document.getElementById("msg").innerHTML += "(over div 4) ";
          break;
 
    }
    //document.getElementById("msg").innerHTML += tabEvent+"<br>";
 
    razTabEvent();
  }
}
 
			var timer = null;
			function seeActionImage(elementToSee,voir){
				var MaDiv = elementToSee.getElementsByTagName('div')[0];
				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>
 
<ul class="imageList" onmouseover="gestionEv(this, 0)">
		<li id="tbl1" onmouseover="gestionEv(this, 1)">
			<img src="images/im5.jpg" width="120px" onmouseover="gestionEv(this, 2)" />
			<div class="actionImg" id="laDiv" style="bottom:-34px;" onmouseover="gestionEv(this, 3)">
				<img src="commentaire.png" width="30px" onmouseover="gestionEv(this, 4)" />
			</div>
		</li>
		</ul>
 
<div id="msg"></div>
 
</body>

en bougeant rapidement la souris , parfois le menu ne descend pas alors qu'en y allant doucement oui :-/ et la méthode de replis est bien appelée X-files ?????

29/01/2009, 17h47
Auteur

Citation:

Envoyé par le_chomeur

il est vrai ;) , mais il subsiste des bugs :

en bougeant rapidement la souris , parfois le menu ne descend pas alors qu'en y allant doucement oui :-/ et la méthode de replis est bien appelée X-files ?????

Quelle idée aussi de sucrer les fraises en tenant ta souris ??? :aie:

Je vois le code que tu as utilisé :D Mais tu as oublié un détail :

Code:

<body onmouseover="gestionEv(this, 0)">

celui-ci est important, c'est ce qui permet de "détecter" le "mouseout" grâce à overDiv = false.

Code:

timer = setInterval(function(){openAction(MaDiv,voir)},10);

mais je pense que ce timer est à l'origine du "bug", en diminuant la tempo, le problème ne devrait plus se poser, mais tu perds l'effet de déroulement.
Donc il faudrait bloquer les événements tant que tu déroules ou tu enroules ton div...

Tu as pris ce code parce qu'il n'utilise pas de timer ?
30/01/2009, 09h00
le_chomeur

Citation:

Envoyé par Auteur

Quelle idée aussi de sucrer les fraises en tenant ta souris ??? :aie:

c'est pas ma faute , c'est parkinson ;)

Citation:

Envoyé par Auteur

Je vois le code que tu as utilisé :D Mais tu as oublié un détail :

Code:

<body onmouseover="gestionEv(this, 0)">

celui-ci est important, c'est ce qui permet de "détecter" le "mouseout" grâce à overDiv = false.

Normalement le over sur le Ul aurait due suffir non ?? ( j'avais également mise la gestion sur le body au départ ;) ) mais même effet :)

Citation:

Envoyé par Auteur

Code:

timer = setInterval(function(){openAction(MaDiv,voir)},10);

mais je pense que ce timer est à l'origine du "bug", en diminuant la tempo, le problème ne devrait plus se poser, mais tu perds l'effet de déroulement.
Donc il faudrait bloquer les événements tant que tu déroules ou tu enroules ton div...

Tu as pris ce code parce qu'il n'utilise pas de timer ?

- pour le timer , effectivement on perd l'intérêt du script ^^
- j'ai pris ce code parce qu'il n'utilise pas de timer ??? pas compris la question :oops:
30/01/2009, 09h51
Auteur
Citation:

Envoyé par le_chomeur

- j'ai pris ce code parce qu'il n'utilise pas de timer ??? pas compris la question :oops:

ce script utilise des flag et "empile" les événements dans un tableau :
Code:

1 2 var tabEvent = new Array("-","-","-","-","-"); //0,1,2,3,4 var overDiv = false;
C'est ce tableau qui me permet de connaître le dernier élément survolé et de savoir si on est sorti du bloc parent (d'où le mouseover sur le body).
Le while dans la fonction gestionEv() permet d'identifier le dernier événement produit et l'objet qui a appelé cet événement, d'où cette numérotation des objets (0-1-2-3-4). 0 étant l'objet parent, 4 étant l'objet enfant de plus bas niveau.

Les autres scripts que je donne en lien utilisent un timer pour faire décaler dans le temps l'événement produit : par exemple avec les mouseout / mouseover ; il faut que le mouseout se produise après le mouseover pas avant.

Donc ça revient à ce que j'ai dit précédemment :

Citation:

Envoyé par Auteur

Donc il faudrait bloquer la gestion des événements tant que tu déroules ou tu enroules ton div...

modifie la condition

Code:

if (tabEvent[0]!="-")

en

Code:

if (tabEvent[0]!="-" && timer==null)

dans la fonction gestionEv() pour voir. Ça bloquera le switch()...case et réinitialisera la pile des événements.
Je n'ai pas testé (pas le temps ce matin :oops:) donc pas sûr que cela résolve le problème.
30/01/2009, 10h04
le_chomeur

Nop ça ne résoud pas le problèmes :-)
mais je vais chercher dans la voie du > élément survolé , élément provenant :)
30/01/2009, 10h10
marcha

@le_chomeur tu as essayé ma proposition ? dans ma première réponse ? (pas compatible IE pour l'instant)

oui marcha :-)
effectivement ta méthode fonctionne parfaitement, mais grosse baisse de performance dès lors que l'on a plusieurs éléments :-/

solution actuelle , via le currentElement :

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
 
<!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: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;
			}
			.centrer{
width:200px;
height:200px;
position:fixed;
margin-left:50%;
left:-100px;
}
		</style>  
<script type="text/javascript">
<!--
var timer = null;
function seeActionImage(elementToSee,voir){
	var MaDiv = elementToSee.getElementsByTagName('div')[0];
	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;
	}
}
 
function getTarget(ev){
	ev = (ev) ? ev:window.event;
	var target = ev.target || ev.srcElement;
	document.getElementById("msg").innerHTML += target.id+"<br />";
	objetTemp = document.getElementById("tbl1");
	clearInterval(timer);
	timer = null;
	if(target.id == "tbl1" || target.id == "monimage" || target.id == "laDiv" || target.id == "imgComment"){
		seeActionImage(objetTemp,true);
	}
	else{
		seeActionImage(objetTemp,false);
	}
}
//-->
</script>
 
</head>
 
<body>
 
<ul class="imageList" id="laliste">
		<li id="tbl1">
			<img src="images/im5.jpg" width="120px" id="monimage" />
			<div class="actionImg" id="laDiv" style="bottom:-34px;">
				<img src="commentaire.png" width="30px" id="imgComment" />
			</div>
		</li>
		</ul>
 
<div id="msg" class="centrer"></div>
 <script type="text/javascript">
 	document.getElementById("laliste").addEventListener("mouseover", getTarget, false);
 </script>
</body>

il ne me resterais plus qu'a créer une méthode is_in plutôt que de vérifier les id , j'ai ma petite idée ...

j'avance j'avance :)

30/01/2009, 11h24
le_chomeur

8O marcha , m'excuse je viens de trouver ce qui faisait une perte de performance accrochez vous :

le float:left des éléments LI 8O8O8O

testé sur ton script marcha et sur le mien , résultat identique le float left, fait ralentir l'animation , j'en reste :bug:

si quelqu'un a une explication première fois que je remarque cela ...
30/01/2009, 11h45
marcha

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 ?

dernière version fonctionnelle ( basé sur mon 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
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

30/01/2009, 13h23
marcha

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) :-)
30/01/2009, 13h55
le_chomeur

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

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

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
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 :aie: :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....

voilà :D
Donne moi ton avis ;)

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
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 ;)

30/01/2009, 23h43
le_chomeur

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 :aie:

Citation:

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:

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>

31/01/2009, 12h12
le_chomeur

:yaisse2::yaisse2::yaisse2:
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

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) :ccool:

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:

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 :oops:) 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 :D
Et aucun des codes présentés utilise l'événement onmouseout ;)

31/01/2009, 18h54
marcha

Citation:

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.
31/01/2009, 20h10
le_chomeur

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 :)
01/02/2009, 00h57
Auteur

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

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