StopPropagation

**le_chomeur** · 29/01/2009, 14h51

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 :

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
 
<!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 ...

**marcha** · 29/01/2009, 15h48

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 :

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
 
<!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>

**SpaceFrog** · 29/01/2009, 15h52

et cancelBubble ?

**le_chomeur** · 29/01/2009, 16h10

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

voila ou j'en suis :

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
 
<!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

**franculo_caoulene** · 29/01/2009, 16h29

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?

**le_chomeur** · 29/01/2009, 16h35

ç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 ... ;(

**SpaceFrog** · 29/01/2009, 16h40

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**marcha** · 29/01/2009, 16h45

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.

**le_chomeur** · 29/01/2009, 16h49

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 ?

**Auteur** · 29/01/2009, 16h52

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

**le_chomeur** · 29/01/2009, 17h01

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

**Auteur** · 29/01/2009, 17h15

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

**le_chomeur** · 29/01/2009, 17h20

il est vrai

, mais il subsiste des bugs :

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
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 ?????

**Auteur** · 29/01/2009, 17h47

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 ???

Je vois le code que tu as utilisé

Mais tu as oublié un détail :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**le_chomeur** · 30/01/2009, 09h00

Envoyé par Auteur

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

c'est pas ma faute , c'est parkinson

Envoyé par Auteur

Je vois le code que tu as utilisé

Mais tu as oublié un détail :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

Envoyé par Auteur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Auteur** · 30/01/2009, 09h51

Envoyé par le_chomeur

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

) donc pas sûr que cela résolve le problème.

**le_chomeur** · 30/01/2009, 10h04

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

**marcha** · 30/01/2009, 10h10

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

**le_chomeur** · 30/01/2009, 10h41

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 :

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
 
<!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>