[debutant javascript] Problème avec visibily=hidden
Salut à tous,
J'ai un problème en javascript, je suis débutant dans ce language. J'ai deux fonctions dans <head></head> :
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
| 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:
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:
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>
- <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:
<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
