Se connecter avec
S'enregistrer | Connectez-vous

Problème code javascript

Dernière réponse : dans Programmation

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" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"> 
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" 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

Lassé par la pub ? Créez un compte

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" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"> 
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" 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

Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde