[debutant javascript] Problème avec visibily=hidden

**FoxDeltaSierra** · 08/03/2006, 18h42

Salut à tous,

J'ai un problème en javascript, je suis débutant dans ce language. J'ai deux fonctions dans <head></head> :

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
function visible(zone)
{
    if (document.layers)
    {
        document.layers[zone].visibility = 'show';
    }
    else if (document.all)
    {
        document.all[zone].style.visibility = 'visible';
    }
    else if (document.getElementById)
    {
        document.getElementById(zone).style.visibility = 'visible';
    }
}
 
function invisible(zone)
{
    if (document.layers)
    {
        document.layers[zone].visibility = 'hide';
    }
    else if (document.all)
    {
        document.all[zone].style.visibility = 'hidden';
    }
    else if (document.getElementById)
    {
        document.getElementById(zone).style.visibility = 'hidden';
    }
}

Ensuite, dans <body></body>, j'ai mis deux <div> et un bouton :

Code :

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

1
2
3
4
5
6
7
		<div id="chargement" style="visibility: hidden;LEFT:650px;POSITION:absolute;TOP:400px;HEIGHT:20px"><table>
				<tr>
					<td><img src="images/grid/spinner.gif"></td>
					<td class="normaltext">Identification en cours...</td>
				</tr>
			</table>
		</div>

L'image spinner.gif est un gif annimé qui bouge.

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
<div id="corp"><DIV class="titre_souligne">Identification</DIV>
							<DIV class="normaltext_decale" align="center"></DIV>
							<DIV class="normaltext_decale" align="center">
								<TABLE id="Table2" cellSpacing="1" cellPadding="1" width="383" border="0">
									<TBODY class="normaltext">
										<TR>
											<TD>Nom d'utilisateur</TD>
											<TD>
												<asp:textbox id="TextBox1" tabIndex="1" runat="server" Width="100%"></asp:textbox></TD>
										</TR>
										<TR>
											<TD height="25">Mot de passe</TD>
											<TD height="25">
												<asp:textbox id="TextBox2" tabIndex="2" runat="server" Width="100%" TextMode="Password"></asp:textbox></TD>
										</TR>
										<TR>
											<TD vAlign="center" width="50%"><A class="normaltext" onmouseover="ChangeMessage('Cette mesure a pour but d\'accroître les performances et d\'empêcher l\'exécution de scripts automatisés non autorisés.','ejs_texte')" onmouseout="ChangeMessage('','ejs_texte')" href="#">Code 
													de sécurité</A>
											</TD>
											<TD vAlign="center" align="right">
												<DIV align="left">
													<TABLE id="Table3" cellSpacing="1" cellPadding="1" width="100%" align="left" border="0">
														<TR>
															<TD>
																<asp:image id="img" runat="server"></asp:image></TD>
															<TD>
																<asp:textbox id="code_verif" tabIndex="3" runat="server"></asp:textbox></TD>
														</TR>
													</TABLE>
												</DIV>
												<P align="left">Recopiez le code Recopiez le code ci-contre.</P>
											</TD>
										</TR>
										<TR>
											<TD width="50%" colSpan="2">
												<P align="center"><BR>
													<asp:CheckBox id="souvenir" onmouseover="ChangeMessage('Vous pouvez cocher cette case pour ne pas avoir à vous identifier lors de votre prochaine visite. Attention, ne pas utiliser cette case si vous vous trouvez sur un ordinateur public. Mes-Gestions.net ne serra pas responsable en cas d\'usurpation de vos identifiants.','ejs_texte')" onmouseout="ChangeMessage('','ejs_texte')" runat="server" CssClass="normaltext" Text="<a href=# class=normaltext>Se souvenir de moi</a>"></asp:CheckBox></P>
											</TD>
										</TR>
										<TR>
											<TD width="50%"></TD>
											<TD></TD>
										</TR>
										<TR>
											<TD colSpan="2">
												<P align="center">
													<asp:button id="Button1" runat="server" Text="Connexion"></asp:button></P>
											</TD>
										</TR>
									</TBODY></TABLE>
							</DIV>
							<DIV class="normaltext_decale" align="center"><A class="normaltext" href="conditions_inscription.aspx">Inscription</A>
								&nbsp;-&nbsp; <A class="normaltext" onclick="window.open('pop-up/perte_mdp.aspx' , 'exemple', 'height=140, width=320, top=100, left=100, toolbar=no, menubar=no, location=no, resizable=no, scrollbars=no, status=no, directories=no');" href="javascript:void(0);">
									Perte de mot de passe</A></DIV>
						</div>
					</div>

et le bouton :

Code :

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

<input type="submit" name="Button1" value="Connexion" id="Button1" onclick="visible('chargement');invisible('corp')" />

Quand je clic sur le bouton, tout fonctionne correctement, le <div> nommé "chargement" apparait et le <div> nommé "corp" disparait. Le seul problème, c'est que mon gif animé qui bouge parfaitement à l'origine, quand je le fais apparaitre (quand apparaît le <div> "chargemen") ne bouge plus du tout... il reste fixé sur la première image, comme une simple image JPG...

Comment faire pour rectifier cette erreur ??? Pouvez-vous me proposer autre chose pour masquer/afficher des div ???

Merci de votre aide,

Jérôme

**narnou** · 08/03/2006, 19h30

Il y en a plusieurs

Premièrement en CSS

Code :

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

1
2
 
display: none;

D'autres options sont disponibles si tu veux trifouiller : block, inline, inline-block, list-item, run-in, compact, table, table-row, table-cell...

Ensuite, toujours en CSS

Code :

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

1
2
3
 
opacity: 0; //pour FF, un nombre entre 0 et 1
filter: alpha(opacity=0); //pour IE, une valeur en pourcentage de 0 à 100

Puis la façon geek à la mode en ce moment en jouant avec le DOM (du javascript donc)

Code :

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

1
2
3
4
5
6
7
8
 
//ici je cache
mondiv = document.getElementById("mondiv");
monparent = mondiv.parentNode;
monparent.removeChild(mondiv);
 
//et la je montre
monparent.appendChild(mondiv);

Mais selon ton code, faut encore insérer ton élément au bon endroit c'est plus relou, c'est pour les sados ca mais bien utile pour injecter des trucs qui veulent pas marcher nickel autrement parfois