Se connecter / S'enregistrer
Votre question

Problème code javascript

Tags :
  • Html
  • Programmation
Dernière réponse : dans Programmation
7 Décembre 2009 20:26:33

Bonsoir, voilà, j'ai une page xHTML avec 5 menus, avant je n'avais que trois menus, donc sur mon code javascript, au lieu de mettre 3, j'ai mis 5, mais quand je met plus de 3, plus aucun menu ne se déroule, et si je laisse 3, seul 3 menus se déroulent, voici tout les codes utilisés:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" >
  3. <head>
  4. <title>Apprenez les maths facilement !</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" media="screen" type="text/css" title="Design" href="index.css" />
  7. <script type="text/javascript" src="functions.js"></script>
  8. </head>
  9.  
  10. <!-- Toute la page -->
  11. <body oncontextmenu="return false">
  12. <div id="en_tete"></div> <!-- La bannière tout en haut de la page -->
  13.  
  14. <div id="menu">
  15. <div class="menu" id="menu1" onmouseover="affiche(this)">
  16. <a href="index.html">Acceuil</a>
  17. </div>
  18. <div class="menu" id="menu2" onmouseover="affiche(this)">
  19. <a href="#">Sixième</a>
  20. </div>
  21. <div id="sousmenu1" style="display:none">
  22. <div class="sousmenu">
  23. <a href="#">Calculs numériques</a>
  24. </div>
  25. <div class="sousmenu">
  26. <a href="#">Géométrie</a>
  27. </div>
  28. </div>
  29. <div class="menu" id="menu3" onmouseover="affiche(this)">
  30. <a href="#">Cinquième</a>
  31. </div>
  32. <div id="sousmenu2" style="display:none">
  33. <div class="sousmenu">
  34. <a href="#">Calculs numériques</a>
  35. </div>
  36. <div class="sousmenu">
  37. <a href="#">Géométrie</a>
  38. </div>
  39. </div>
  40. <div class="menu" id="menu4" onmouseover="affiche(this)">
  41. <a href="#">Quatrième</a>
  42. </div>
  43. <div id="sousmenu3" style="display:none">
  44. <div class="sousmenu">
  45. <a href="#">Calculs numériques</a>
  46. </div>
  47. <div class="sousmenu">
  48. <a href="#">Géométrie</a>
  49. </div>
  50. </div>
  51. <div class="menu" id="menu5" onmouseover="affiche(this)">
  52. <a href="#">Troisième</a>
  53. </div>
  54. <div id="sousmenu4" style="display:none">
  55. <div class="sousmenu">
  56. <a href="#">Calculs numériques</a>
  57. </div>
  58. <div class="sousmenu">
  59. <a href="#">Géométrie</a>
  60. </div>
  61. </div>
  62. </div>
  63.  
  64.  
  65.  
  66. <div id="corps"> <!-- Le corps de ma page -->
  67. </div>
  68.  
  69.  
  70. </body>
  71. </html>

  1. body
  2. {
  3. width: 860px;
  4. margin: auto; /* Pour centrer notre page */
  5. margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
  6. margin-bottom: 20px; /* Idem pour le bas du navigateur */
  7. background-color: black;
  8. }
  9.  
  10. #en_tete
  11. {
  12. width: 540px;
  13. height: 260px;
  14. background-image: url("Bannière.png");
  15. background-repeat: no-repeat;
  16. margin-bottom: 0px;
  17. }
  18.  
  19. #menu{
  20. width:150px;
  21. margin:0px auto 0 auto;
  22. float: left;
  23. border: 2px solid #FFFFFF;
  24. }
  25. .menu, .sousmenu{
  26. text-align:center;
  27. }
  28. .menu{
  29. height:50px;
  30. width:150px;
  31. padding:0px 0;
  32. color:#F00;
  33. }
  34. .sousmenu{
  35. height:18px;
  36. width:150px;
  37. padding:0px 0;
  38. color:#000000;
  39. }
  40. .menu a{
  41. display:block;
  42. width:100%;
  43. height:100%;
  44. color:#F00;
  45. font-family:arial,sans-serif;
  46. font-size:25px;
  47. font-weight:bold;
  48. text-decoration:none;
  49. background:#000000;
  50. }
  51. .sousmenu a{
  52. display:block;
  53. width:100%;
  54. height:100%;
  55. color:#1AB515;
  56. font-family:arial,sans-serif;
  57. font-size:12px;
  58. font-weight:bold;
  59. text-decoration:none;
  60. background: #000000;
  61. }
  62. .menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
  63. }
  64.  
  65. #corps
  66. {
  67. margin-left: 170px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  68. margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
  69. padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  70. }

  1. function affiche(obj){
  2. var id = obj.id;
  3. for(var i = 2; i <= 3; i++){
  4. document.getElementById('sousmenu'+i).style.display = "none";
  5. }
  6. if(document.getElementById('sous'+id)){
  7. document.getElementById('sous'+id).style.display = "block";
  8. }
  9. }


Svp aidez- moi :s


Autres pages sur : probleme code javascript

a c 145 L Programmation
7 Décembre 2009 20:56:29

  1. for(var i = 2; i <= 3; i++){

il faut que ça aille juqs'à 4.
m
0
l
7 Décembre 2009 20:58:18

Comment sa ? Tu peux expliquer stp ? Et si possible me donner le code correcte.
m
0
l
Contenus similaires
a c 145 L Programmation
7 Décembre 2009 21:04:37

Non, tu as tous les éléments, tu réfléchis. Sinon, tu ne feras que recopier bêtement et tu n'auras rien appris.
m
0
l
8 Décembre 2009 12:58:44

trop dur de remplacer un chiffre par un autre ...?
m
0
l
11 Décembre 2009 22:42:45

J'ai essayer de remplacer le 3 par le 4 mais, quand je fait sa, plus aucun de mes menus ne se déroulent, si non, ce serait trop facile, et je n'aurais pas poster un sujet là-dessus.
m
0
l
Anonyme
23 Décembre 2009 23:44:09

sasuke-uchiwa-itachi a dit :
Bonsoir, voilà, j'ai une page xHTML avec 5 menus, avant je n'avais que trois menus, donc sur mon code javascript, au lieu de mettre 3, j'ai mis 5, mais quand je met plus de 3, plus aucun menu ne se déroule, et si je laisse 3, seul 3 menus se déroulent, voici tout les codes utilisés:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" >
  3. <head>
  4. <title>Apprenez les maths facilement !</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" media="screen" type="text/css" title="Design" href="index.css" />
  7. <script type="text/javascript" src="functions.js"></script>
  8. </head>
  9.  
  10. <!-- Toute la page -->
  11. <body oncontextmenu="return false">
  12. <div id="en_tete"></div> <!-- La bannière tout en haut de la page -->
  13.  
  14. <div id="menu">
  15. <div class="menu" id="menu1" onmouseover="affiche(this)">
  16. <a href="index.html">Acceuil</a>
  17. </div>
  18. <div class="menu" id="menu2" onmouseover="affiche(this)">
  19. <a href="#">Sixième</a>
  20. </div>
  21. <div id="sousmenu1" style="display:none">
  22. <div class="sousmenu">
  23. <a href="#">Calculs numériques</a>
  24. </div>
  25. <div class="sousmenu">
  26. <a href="#">Géométrie</a>
  27. </div>
  28. </div>
  29. <div class="menu" id="menu3" onmouseover="affiche(this)">
  30. <a href="#">Cinquième</a>
  31. </div>
  32. <div id="sousmenu2" style="display:none">
  33. <div class="sousmenu">
  34. <a href="#">Calculs numériques</a>
  35. </div>
  36. <div class="sousmenu">
  37. <a href="#">Géométrie</a>
  38. </div>
  39. </div>
  40. <div class="menu" id="menu4" onmouseover="affiche(this)">
  41. <a href="#">Quatrième</a>
  42. </div>
  43. <div id="sousmenu3" style="display:none">
  44. <div class="sousmenu">
  45. <a href="#">Calculs numériques</a>
  46. </div>
  47. <div class="sousmenu">
  48. <a href="#">Géométrie</a>
  49. </div>
  50. </div>
  51. <div class="menu" id="menu5" onmouseover="affiche(this)">
  52. <a href="#">Troisième</a>
  53. </div>
  54. <div id="sousmenu4" style="display:none">
  55. <div class="sousmenu">
  56. <a href="#">Calculs numériques</a>
  57. </div>
  58. <div class="sousmenu">
  59. <a href="#">Géométrie</a>
  60. </div>
  61. </div>
  62. </div>
  63.  
  64.  
  65.  
  66. <div id="corps"> <!-- Le corps de ma page -->
  67. </div>
  68.  
  69.  
  70. </body>
  71. </html>

  1. body
  2. {
  3. width: 860px;
  4. margin: auto; /* Pour centrer notre page */
  5. margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
  6. margin-bottom: 20px; /* Idem pour le bas du navigateur */
  7. background-color: black;
  8. }
  9.  
  10. #en_tete
  11. {
  12. width: 540px;
  13. height: 260px;
  14. background-image: url("Bannière.png");
  15. background-repeat: no-repeat;
  16. margin-bottom: 0px;
  17. }
  18.  
  19. #menu{
  20. width:150px;
  21. margin:0px auto 0 auto;
  22. float: left;
  23. border: 2px solid #FFFFFF;
  24. }
  25. .menu, .sousmenu{
  26. text-align:center;
  27. }
  28. .menu{
  29. height:50px;
  30. width:150px;
  31. padding:0px 0;
  32. color:#F00;
  33. }
  34. .sousmenu{
  35. height:18px;
  36. width:150px;
  37. padding:0px 0;
  38. color:#000000;
  39. }
  40. .menu a{
  41. display:block;
  42. width:100%;
  43. height:100%;
  44. color:#F00;
  45. font-family:arial,sans-serif;
  46. font-size:25px;
  47. font-weight:bold;
  48. text-decoration:none;
  49. background:#000000;
  50. }
  51. .sousmenu a{
  52. display:block;
  53. width:100%;
  54. height:100%;
  55. color:#1AB515;
  56. font-family:arial,sans-serif;
  57. font-size:12px;
  58. font-weight:bold;
  59. text-decoration:none;
  60. background: #000000;
  61. }
  62. .menu a:hover, .sous menu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
  63. }
  64.  
  65. #corps
  66. {
  67. margin-left: 170px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  68. margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
  69. padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  70. }

  1. function affiche(obj){
  2. var id = obj.id;
  3. for(var i = 2; i <= 3; i++){
  4. document.getElementById('sousmenu'+i).style.display = "none";
  5. }
  6. if(document.getElementById('sous'+id)){
  7. document.getElementById('sous'+id).style.display = "block";
  8. }
  9. }


Svp aidez- moi :s

m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS