onMouseOver = Write-> Clignote

Version imprimable

Bonjour à tous ,

Mon problème est le suivant j'ai créer un div:"hidden" :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id="infos"> <table id ="tableInfos"> <tr> <td><img src="img/info.png" alt="Infos:" border="0"></td> <td><b><p style="vertical-align: middle;">Informations :</p></b></td> </tr> <tr> <td colspan="2"> <div id="informations" style="height: 300px;"></div> </td> </tr> </table> </div>
Son code Css:
Code:

1 2 3 4 5 6 7 8 #infos { position: absolute; visibility: hidden; left:490px; top:120px; width: 300px; }
Ce div s'affiche via une fonction javascript basique :
Code:

1 2 3 4 5 6 7 8 9 10 function Write(nom, contenu) { document.getElementById(nom).innerHTML = contenu ; document.getElementById("infos").style.visibility = 'visible'; } function Hide() { document.getElementById("infos").style.visibility = 'hidden'; }
Sur l'événement :
Code:

1 2 3 <td> <a href ="#" onMouseOver="Write('informations', ' Je suis le test de l'affichage du DIV')" onMouseOut="Hide()"><img src="img/info.png" border="0"/></a> </td>
Toute fois sous firefox lorsque je positionne ma souris sur mon image le div apparait l'espace d'une micro seconde puis disparait. Lorsque je bouge ma souris sur l'image le div clignote ou peut se situer mon problème ?

Merci pour votre soutient .

17/01/2008, 09h40
E.Bzz

Bonjour,
il peut y avoir plusieurs cause.
1) plantage du code, à cause d'un quote non protégée

Code:

onMouseOver="Write('informations', ' Je suis le test de l\'affichage du DIV')"

2) Si la modification du texte d'info génère un décalage des objets de ta page (lorsque la hauteur du conteneur s'adapte au contenu), il est fort possible que cela déclenche le onmouseout qui cache le <div>.

=> après le "clignotement", le onmouseover/onmouseout est-il toujours fonctionnel (sans rechargement) ?

A+
17/01/2008, 09h49
javaboy

Citation:

1) plantage du code, à cause d'un quote non protégée
Code :

onMouseOver="Write('informations', ' Je suis le test de l\'affichage du DIV')"

Je vient d'essayer en remplaceant par 'Bonjour' il fait la même chose .

Citation:

Si la modification du texte d'info génère un décalage des objets de ta page (lorsque la hauteur du conteneur s'adapte au contenu), il est fort possible que cela déclenche le onmouseout qui cache le <div>.

Je ne comprend pas top cette phrase toute fois cela ne decale rien sur la page web cela joue un peu le role de 'surimpression' je pense. Et le conteneur à une valeur fixe en hauteur au pire des cas si le contenu depasse la valeur du contenneur tout n'est pas affiché c'est tout non ?

Citation:

après le "clignotement", le onmouseover/onmouseout est-il toujours fonctionnel (sans rechargement) ?

Oui il n'y à pas de probleme a ce niveau cela reste fonctionnel et firebug ne me trouve pas de problème au niveau du JS.
17/01/2008, 09h56
E.Bzz

Citation:

Envoyé par javaboy

Je vient d'essayer en remplaceant par 'Bonjour' il fait la même chose .

Ca n'empêche pas l'erreur dans cette version-ci ;)

Citation:

Envoyé par javaboy

Je ne comprend pas top cette phrase toute fois cela ne decale rien sur la page web cela joue un peu le role de 'surimpression' je pense.

Effectivement : positionné en absolute => pas de décalage du reste ...

=> Positionne les onmouseover/onmouseout sur <img> au lieu de <a href>.
(le onmouseout doit être dû justement au passage de <a href> => <img>)

A+
17/01/2008, 10h03
javaboy

Citation:

Positionne les onmouseover/onmouseout sur <img> au lieu de <a href>.

Comme cela tu veut dire :

Code:

<img src="img/info.png" border="0" onMouseOver="Write('informations', 'Je suis un test')" onMouseOut="Hide()"/>

Cela fait le même effet de clignottement.
Question annexe j'ai dans mon header un texte defilant (on dirai que cela joue un rôle avec le glinotement )
---> Je vient d'essayer en enlevant le texte defilant il n'y a pas de rapport .

Merci pour ton aide .
17/01/2008, 10h22
javaboy

J'arrive plus ou moins a contourner le probleme, mais cela n'est pas trop génial (point de vue fonctionnement):

Sur mon image :

Code:

<img src="img/info.png" border="0" onMouseOver="Write('informations', 'Je suis un test')"/>

Sur mon div caché qui s'affiche :

Code:

<div id="informations" style="height: 300px;" onMouseOut="Hide()" onClick="Hide()"></div>

Si tu as une autre idée je suis prenneur.
17/01/2008, 10h31
E.Bzz

Citation:

Envoyé par javaboy

Comme cela tu veut dire :

Code:

<img src="img/info.png" border="0" onMouseOver="Write('informations', 'Je suis un test')" onMouseOut="Hide()"/>

Oui, mais en les enlevant du <a href>.
Pas d'autre idée : il faudrait que je teste, mais je n'ai pas bien le temps pour l'instant :?

A+
17/01/2008, 10h46
le_chomeur

Tu pourrais ajouter un timer :oops:
tu lance le timer dès que tu es sur ton mouse out pour par exemple masquer au bout d'une seconde et remet le timer a 1 secondes dès que tu es en mouseover ...
17/01/2008, 10h51
javaboy

Citation:

Oui, mais en les enlevant du <a href>.

Oui c'est ce que j'avait fait.

Le_chomeur : Cela peut être envisageable mais je ne sait pas trop comment faire ni si j'aurais le résultat escompté, moi je cherche simplement à fair apparaite une 'fentre' informations lorsque l'uitlisateur passe sa souris son l'image (i) puis qui s'enlève lorsque l'utilisateur sort de cette image.

Merci si vous voulez le code entier pour voir si l'erreur est antérieur ou autre.

Je veux bien le code en entier car en reprenant le tient et en recréant la page je n'ai aucun clignotement :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
#infos
{
	position: absolute; 
	visibility: hidden; 
	left:490px; 
	top:120px; 
	width: 300px;
}
</style>
<script type="text/javascript">
function Write(nom, contenu)
	{
		document.getElementById(nom).innerHTML = contenu ;
		document.getElementById("infos").style.visibility = 'visible';
	}
 
function Hide()
	{
		document.getElementById("infos").style.visibility = 'hidden';
	}
</script>
</head>
 
<body>
<div id="infos">
		<table id ="tableInfos">
			<tr>
				<td><img src="BarreMenu_d.gif" alt="Infos:" border="0"></td>
				<td><b><p style="vertical-align: middle;">Informations :</p></b></td>
			</tr>
			<tr>
				<td colspan="2">
					<div id="informations" style="height: 300px;"></div>
				</td>
			</tr>
		</table>
	</div>
 
	<br />
	<br  />
<table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><a href ="#" onMouseOver="Write('informations', ' coucoux')" onMouseOut="Hide()"><img src="BarreMenu_d.gif" border="0"/></a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
 
</body>
</html>

l'image BarreMenu_d.gif fait quasiement toute la largeur de la page ...

Merci pour ton aide :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>Infrastructux</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
	<link href="style/site.css" rel="stylesheet" type="text/css">
	<link href="style/menu.css" rel="stylesheet" type="text/css">
	<link href="style/catalogue.css" rel="stylesheet" type="text/css">
 
	<script src="js/menuaide.js"></script>
 
	<script src="js/panier.js"></script>
	<script src="js/passparam.js"></script>
 
	<style type="text/css">
	<!-- body
	{
		background-image: url("img/fond2.png");
	}
	-->
	</style>
 
</head>
 
<body>
 
<div id="entete">
	<div id="logo">
 
		<img alt="header.jpg" src="img/header.jpg" />
		<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="100" HEIGHT="100" CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=5,0,0,0">
			<PARAM NAME="MOVIE" VALUE="clock5.swf">
			<PARAM NAME="PLAY" VALUE="true">
			<PARAM NAME="LOOP" VALUE="true">
			<PARAM NAME="WMODE" VALUE="Transparent">
			<PARAM NAME="QUALITY" VALUE="high">
			<EMBED SRC="flash/clock5.swf" WIDTH="100" HEIGHT="100" PLAY="true" LOOP="true" WMODE="Transparent" QUALITY="high"
			PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
			</EMBED>
 
		</OBJECT>
	</div>
	<!--Texte defilant-->
	<table id="texte_defil">
	  <tbody>
	    <tr>
	      <td style="vertical-align: top;">
		    <Marquee 
				onmouseover="this.stop();"
			    onmouseout="this.start();"
			    direction="left" 
				SCROLLAMOUNT="4" 
				SCROLLDELAY="100" 
				width="100%">Infrascrutux vous souhaite la bienvenue. Nos promotions du moment : 
					<a href="catalog.php#ProCurve_2810" title="ProCurve 2810">ProCurve_2810</a> et
					<a href="catalog.php#ProCurve_2650" title="ProCurve 2650">ProCurve_2650</a>.
			</Marquee>
 
	     </td>
	    </tr>
	  </tbody>
	</table>
</div><div id="menu">
	<!--Le menu sera situé du cote gauche et sera horizontal-->
	<table class="TableStyle">
		<tr>
			<td><img src ="img/Nous_connaitre.png"/></td>
 
		</tr>
		<tr>
			<td>	
				<div id="list-menu">
					<ul>
						<li><a href="index.php" title="Acceuil">Accueil</a></li>
						<li><a href="catalog.php" title="Nos produits">Catalogue</a></li>
						<li><a href="formulaire.php" title="Nous contacter">Nous contacter</a></li>
 
					</ul>
				</div>
			</td>
		</tr>
	</table>
	<br /><br />
	<table class="TableStyle">
		<tr>
			<td><img src ="img/Nos_prestations.png"/></td>
 
		</tr>
		<tr>
			<td>	
				<div id="list-menu">	
					<ul>
						<li><a href="#">Clients</a></li>
						<li><a href="#">Demande de devis</a></li>
						<li><a href="fournisseurs.php" title="Nos fournisseurs">Nos fournisseurs</a></li>
 
						<li><a href="realisations.php" title="r&eacute;alisations">Nos r&eacute;alisations</a></li>
					</ul>
				</div>
			</td>
		</tr>
	</table>
</div><div id="contenu">
	<div id="infos">
 
		<table id ="tableInfos">
			<tr>
				<td><img src="img/info.png" alt="Infos:" border="0"></td>
				<td><b><p style="vertical-align: middle;">Informations :</p></b></td>
			</tr>
			<tr>
				<td colspan="2">
					<div id="informations" style="height: 300px;" onMouseOut="Hide()" onClick="Hide()"></div>
 
				</td>
			</tr>
		</table>
	</div>
 
	<div id="catalogue">
		<h1>Catalogue</h1>
		<hr noshade width="900" size="1" >
 
		<table>
 
			<tr bgcolor="#2d3658">
				<th>Modèles</th>
				<th>Images</th>
				<th>Plus d'informations</th>
				<th>Caractéristiques</th>
				<th>Prix(TTC)</th>
 
				<th>Caddy</th>
			</tr>
			<tr bgcolor="#bdc4dd">
				<td id="ProCurve_2810">
					ProCurve 2810-24G J9021A
				</td>
				<td>
					<img src="img\produits\ProCurve_2810-24G_J9021A.jpg"/>
				</td>
 
				<td>
					<img src="img/info.png" border="0" onMouseOver="Write('informations', 'Je suis un test')"/>
				</td>
				<td>
					Commutateur - 20 ports + 2 modules GBIC
				</td>
				<td>
					2045,00 &euro;
				</td>
 
				<td>
					<a href ="javascript:void(0)" onClick ="Test('ProCurve_2810','2045');"/><img src="img\caddie.png" border="0"/></a>
				</td>
			</tr>
			<tr>
				<td id="ProCurve_2650">
					ProCurve 2650 J4899C
				</td>
				<td>
 
					<img src="img\produits\ProCurve_2650_J4899C.jpg"/>
				</td>
				<td>
					<a href ="#" onMouseOver="Write('informations', '- 48 ports 10/100 &agrave; d&eacute;tection automatique (10Base-T, 100Base-TX)<br/>- 1 port de console RS-232C DB-9.<br/>- 2 ports double-fonction.<br/> Chaque port peut être utilis&eacute; comme port RJ-45 10/100/1000 (Type 10Base-T, 100Base-TX, Gigabit Ethernet 1000Base-T) ou comme port mini-GBIC vacant (destin&eacute; &agrave; des transceivers mini-GBIC)')" onMouseOut="Hide()"><img src="img/info.png" border="0"></a>
				</td>
				<td>
					Commutateur - 48 ports
				</td>
				<td>
 
					823,00 &euro;
				</td>
				<td>
					<a href ="javascript:void(0)" onClick ="ajoute_objet('ProCurve_2650',2045);"/><img src="img\caddie.png" border="0"/></a>
				</td>
			</tr>
		</table>
	</div>
 
</div>
 
<div id="footer">
  Copyright &copy;   Infrastructux developement by Me<br/>
  Vous souhaitez nous contacter :<a href ="formulaire.php"><img src="img/mail.png" border="0"></a>
</div>
 
</body>
</html>

En effet ton codefonctionne bien chez moi également j'en conclus donc que c''est du à une erreur de ma part peut être en amont.

il manque les scripts ...
j'ai rajouter le style css + les deux fonctions hides et write dans le code , je n'ai pas d'image j'ai donc mis une balise alt "passe par ici" et ça marche parfaitement :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>Infrastructux</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
	<link href="style/site.css" rel="stylesheet" type="text/css">
	<link href="style/menu.css" rel="stylesheet" type="text/css">
	<link href="style/catalogue.css" rel="stylesheet" type="text/css">
 
	<script src="js/menuaide.js"></script>
 
	<script src="js/panier.js"></script>
	<script src="js/passparam.js"></script>
 
	<style type="text/css">
	<!-- body
	{
		background-image: url("img/fond2.png");
	}
	#infos
{
	position: absolute; 
	visibility: hidden; 
	left:490px; 
	top:120px; 
	width: 300px;
}
	-->
	</style>
 
	<script type="text/javascript">
	function Write(nom, contenu)
	{
		document.getElementById(nom).innerHTML = contenu ;
		document.getElementById("infos").style.visibility = 'visible';
	}
 
function Hide()
	{
		document.getElementById("infos").style.visibility = 'hidden';
	}
	</script>
 
</head>
 
<body>
 
<div id="entete">
	<div id="logo">
 
		<img alt="header.jpg" src="img/header.jpg" />
		<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="100" HEIGHT="100" CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=5,0,0,0">
			<PARAM NAME="MOVIE" VALUE="clock5.swf">
			<PARAM NAME="PLAY" VALUE="true">
			<PARAM NAME="LOOP" VALUE="true">
			<PARAM NAME="WMODE" VALUE="Transparent">
			<PARAM NAME="QUALITY" VALUE="high">
			<EMBED SRC="flash/clock5.swf" WIDTH="100" HEIGHT="100" PLAY="true" LOOP="true" WMODE="Transparent" QUALITY="high"
			PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
			</EMBED>
 
		</OBJECT>
	</div>
	<!--Texte defilant-->
	<table id="texte_defil">
	  <tbody>
	    <tr>
	      <td style="vertical-align: top;">
		    <Marquee 
				onmouseover="this.stop();"
			    onmouseout="this.start();"
			    direction="left" 
				SCROLLAMOUNT="4" 
				SCROLLDELAY="100" 
				width="100%">Infrascrutux vous souhaite la bienvenue. Nos promotions du moment : 
					<a href="catalog.php#ProCurve_2810" title="ProCurve 2810">ProCurve_2810</a> et
					<a href="catalog.php#ProCurve_2650" title="ProCurve 2650">ProCurve_2650</a>.
			</Marquee>
 
	     </td>
	    </tr>
	  </tbody>
	</table>
</div><div id="menu">
	<!--Le menu sera situé du cote gauche et sera horizontal-->
	<table class="TableStyle">
		<tr>
			<td><img src ="img/Nous_connaitre.png"/></td>
 
		</tr>
		<tr>
			<td>	
				<div id="list-menu">
					<ul>
						<li><a href="index.php" title="Acceuil">Accueil</a></li>
						<li><a href="catalog.php" title="Nos produits">Catalogue</a></li>
						<li><a href="formulaire.php" title="Nous contacter">Nous contacter</a></li>
 
					</ul>
				</div>
			</td>
		</tr>
	</table>
	<br /><br />
	<table class="TableStyle">
		<tr>
			<td><img src ="img/Nos_prestations.png"/></td>
 
		</tr>
		<tr>
			<td>	
				<div id="list-menu">	
					<ul>
						<li><a href="#">Clients</a></li>
						<li><a href="#">Demande de devis</a></li>
						<li><a href="fournisseurs.php" title="Nos fournisseurs">Nos fournisseurs</a></li>
 
						<li><a href="realisations.php" title="r&eacute;alisations">Nos r&eacute;alisations</a></li>
					</ul>
				</div>
			</td>
		</tr>
	</table>
</div><div id="contenu">
	<div id="infos">
 
		<table id ="tableInfos">
			<tr>
				<td><img src="img/info.png" alt="Infos:" border="0"></td>
				<td><b><p style="vertical-align: middle;">Informations :</p></b></td>
			</tr>
			<tr>
				<td colspan="2">
					<div id="informations" style="height: 300px;" onClick="Hide()"></div>
 
				</td>
			</tr>
		</table>
	</div>
 
	<div id="catalogue">
		<h1>Catalogue</h1>
		<hr noshade width="900" size="1" >
 
		<table>
 
			<tr bgcolor="#2d3658">
				<th>Modèles</th>
				<th>Images</th>
				<th>Plus d'informations</th>
				<th>Caractéristiques</th>
				<th>Prix(TTC)</th>
 
				<th>Caddy</th>
			</tr>
			<tr bgcolor="#bdc4dd">
				<td id="ProCurve_2810">
					ProCurve 2810-24G J9021A
				</td>
				<td>
					<img src="img\produits\ProCurve_2810-24G_J9021A.jpg"/>
				</td>
 
				<td>
					<img src="img/info.png" border="0" alt="passe par ici" onMouseOver="Write('informations', 'Je suis un test')" onMouseOut="Hide()"/>
				</td>
				<td>
					Commutateur - 20 ports + 2 modules GBIC
				</td>
				<td>
					2045,00 &euro;
				</td>
 
				<td>
					<a href ="javascript:void(0)" onClick ="Test('ProCurve_2810','2045');"/><img src="img\caddie.png" border="0"/></a>
				</td>
			</tr>
			<tr>
				<td id="ProCurve_2650">
					ProCurve 2650 J4899C
				</td>
				<td>
 
					<img src="img\produits\ProCurve_2650_J4899C.jpg"/>
				</td>
				<td>
					<a href ="#" onMouseOver="Write('informations', '- 48 ports 10/100 &agrave; d&eacute;tection automatique (10Base-T, 100Base-TX)<br/>- 1 port de console RS-232C DB-9.<br/>- 2 ports double-fonction.<br/> Chaque port peut être utilis&eacute; comme port RJ-45 10/100/1000 (Type 10Base-T, 100Base-TX, Gigabit Ethernet 1000Base-T) ou comme port mini-GBIC vacant (destin&eacute; &agrave; des transceivers mini-GBIC)')" onMouseOut="Hide()"><img src="img/info.png" border="0"></a>
				</td>
				<td>
					Commutateur - 48 ports
				</td>
				<td>
 
					823,00 &euro;
				</td>
				<td>
					<a href ="javascript:void(0)" onClick ="ajoute_objet('ProCurve_2650',2045);"/><img src="img\caddie.png" border="0"/></a>
				</td>
			</tr>
		</table>
	</div>
 
</div>
 
<div id="footer">
  Copyright &copy;   Infrastructux developement by Me<br/>
  Vous souhaitez nous contacter :<a href ="formulaire.php"><img src="img/mail.png" border="0"></a>
</div>
 
</body>
</html>

la je ne vois plus pourrait tu mettres en ligne tout ça ?

17/01/2008, 11h25
javaboy

Pardon j'en oubli la moitié :
Actuellement au travail je suis bloquer par un proxy donc impossible d'uploader ca sur un ftp ...

Je t'envois ca par mail
22/01/2008, 16h23
javaboy

Resolu,
Merci pour votre aide et tout particuliérement a :le_chomeur