Se connecter avec
S'enregistrer | Connectez-vous

Besoin d'aide en javascript pour un menu

Dernière réponse : dans Programmation

Salut à Tous,

Voila j'ai un soucis de programmation javascript.
Je veux faire un menu puis un sous menu. Je voudrais que lorsque le visiterr passe sa souris sur le titre, le sous menu apparaissent. Et c'est à partir de la que vient le problème :
1- ca ne marche pas quand on passe la souris dessus mais seulement quand on clique sur l'image
2- Sur Mozilla, le sous menu apparait bien par contre sur IE, il l'affiche sur plusieurs lignes, autant de lignes que de sous menu.

Voici le code de la partie <head></head>, la partie body étant juste l'appel de la fonction generate() 

  1. <script language="JavaScript"> 
    

  2.  
  3. var couleur1 = ""; // Couleur de fond du menu 
    

  4. var couleur2 = ""; // Couleur de surlignement 
    

  5. var couleurBordure = ""; // Couleur de la bordure 
    

  6. var couleurTexte = ""; // Couleur du texte 
    

  7. var police = "Arial"; // Police utilisée pour le texte 
    

  8. var tailleTexte = 12; // Taille du texte 
    

  9.  
  10. var largeurMenuTotale = 834; // Largeur totale du menu 
    

  11. var largeurMenuGauche = 600; // Largeur de la partie gauche du menu 
    

  12. var hauteurMenuTotale = 25; // Hauteur du menu 
    

  13.  
  14. // IMPORTANT : Nombre de menus 
    

  15. var nbMenu = 8; //Nombre de menu principaux 
    

  16.  
  17.  
  18.  
  19. var savTab=""; // Ne pas modifier 
    

  20.  
  21. var menu = new Array(nbMenu) // Ne pas modifier 
    

  22. var sousMenuTitre = new Array(); // Ne pas modifier 
    

  23. var sousMenuLien = new Array(); // Ne pas modifier 
    

  24. var sousMenuTarget = new Array(); // Ne pas modifier 
    

  25. for(i=0; i<nbMenu; i++) { // Ne pas modifier 
    

  26. sousMenuTitre[i] = new Array(); // Ne pas modifier 
    

  27. sousMenuLien[i] = new Array(); // Ne pas modifier 
    

  28. sousMenuTarget[i] = new Array();// Ne pas modifier 
    

  29. } 
    

  30.  
  31.  
  32. // Les titres des menus principaux 
    

  33. menu[0] = "<img src='images/accueil/club_menu.jpg' width='92' height='25' border='0' vspace='0' hspace='0'/>"; 
    

  34. menu[1] = "<img src='images/accueil/aujour_menu.jpg' width='106' height='25' border='0' vspace='0' hspace='0'/>"; 
    

  35. menu[2] = "<img src='images/accueil/competitins_menu.jpg' width='106' height='25' border='0' vspace='0' hspace='0'/>"; 
    

  36. menu[3] = "<img src='images/accueil/billetterie_menu.jpg' width='106' height='25' border='0' vspace='0' hspace='0'/>"; 
    

  37. menu[4] = "<img src='images/accueil/equipes_menu.jpg' width='106' height='25' border='0' vspace='0' hspace='0'/>"; 
    

  38. menu[5] = "<img src='images/accueil/online_menu.jpg' width='106' height='25' border='0' vspace='0' hspace='0'/>"; 
    

  39. menu[6] = "<img src='images/accueil/multimdia_menu.jpg' width='106' height='25' border='0' vspace='0' hspace='0'/>"; 
    

  40. menu[7] = "<img src='images/accueil/partenaires_menu.jpg' width='106' height='25' border='0' vspace='0' hspace='0'/>"; 
    

  41.  
  42. // Pour chaque sous-menu, renseignez son titre, son lien et sa cible 
    

  43.  
  44. // [0][x] : Correspond à tous les sousmenus du menu Javascript 
    

  45. sousMenuTitre[0][0] = "Exemples "; // Titre du sous menu 
    

  46. sousMenuLien[0][0] = "<a href="http://www.xxx/" target="_blank">http://www.xxx/</a>"; // Lien du sous menu 
    

  47. sousMenuTarget[0][0] = "_blank"; // Cible du sous menu 
    

  48.  
  49. sousMenuTitre[0][1] = "Cours "; 
    

  50. sousMenuLien[0][1] = "<a href="http://www.xxx/" target="_blank">http://www.xxx/</a>"; 
    

  51. sousMenuTarget[0][1] = "_blank"; 
    

  52.  
  53. sousMenuTitre[0][2] = "Astuces "; 
    

  54. sousMenuLien[0][2] = "<a href="http://www.xxx/" target="_blank">http://www.xxx/</a>"; 
    

  55. sousMenuTarget[0][2] = "_blank"; 
    

  56.  
  57. // [1][x] : Correspond à tous les sousmenus du menu Php 
    

  58. sousMenuTitre[1][0] = "Script "; 
    

  59. sousMenuLien[1][0] = "<a href="http://www.xxx/" target="_blank">http://www.xxx/</a>"; 
    

  60. sousMenuTarget[1][0] = "_blank"; 
    

  61.  
  62. sousMenuTitre[1][1] = "Tutoriaux "; 
    

  63. sousMenuLien[1][1] = "<a href="http://www.xxx/" target="_blank">http://www.xxx/</a>"; 
    

  64. sousMenuTarget[1][1] = "_blank"; 
    

  65.  
  66. sousMenuTitre[1][2] = "Réferences "; 
    

  67. sousMenuLien[1][2] = "<a href="http://www.xxx/" target="_blank">http://www.xxx/</a>"; 
    

  68. sousMenuTarget[1][2] = "_blank"; 
    

  69.  
  70. // [2][x] : Correspond à tous les sousmenus du menu Contact 
    

  71. sousMenuTitre[2][0] = "Webmaster"; 
    

  72. sousMenuLien[2][0] = "<a href="http://www.xxx/" target="_blank">http://www.xxx/</a>"; 
    

  73. sousMenuTarget[2][0] = "_blank"; 
    

  74.  
  75. sousMenuTitre[2][1] = "Editeur"; 
    

  76. sousMenuLien[2][1] = "<a href="http://www.xxx/" target="_blank">http://www.xxx/</a>"; 
    

  77. sousMenuTarget[2][1] = "_blank"; 
    

  78.  
  79.  
  80. /* 
    

  81. NE PAS MODIFIER SOUS CETTE LIGNE--------------------------- 
    

  82. */ 
    

  83. function ouvrirLien(destination,target) 
    

  84. { 
    

  85. switch(target){ 
    

  86. case "_blank": 
    

  87. window.open(destination); 
    

  88. break; 
    

  89. case "_top": 
    

  90. window.top.location.href = destination; 
    

  91. break; 
    

  92. default: 
    

  93. window.top.parent.frames[target].location.href = destination; 
    

  94. break; 
    

  95. } 
    

  96. } 
    

  97.  
  98. function ecrire(id) 
    

  99. { 
    

  100. // on affiche le menu 
    

  101. codeHtml = " "; 
    

  102. for(j=0;j<sousMenuTitre[id].length;j++) 
    

  103. { 
    

  104. codeHtml += "<td onmouseover='ouvrirLien(\"" + sousMenuLien[id][j] + "\",\"" + sousMenuTarget[id][j] + "\")'>" + sousMenuTitre[id][j] + "     "; 
    

  105. } 
    

  106. // codeHtml += "</td></tr>"; 
    

  107. document.getElementById("menu").innerHTML = codeHtml; 
    

  108. } 
    

  109.  
  110. function changeCouleur(tab,type) 
    

  111. { 
    

  112. switch(type){ 
    

  113. case 0 : 
    

  114. // mouseover 
    

  115. if(tab != savTab) 
    

  116. tab.bgColor = couleur2; 
    

  117. break; 
    

  118. case 1 : 
    

  119. // mouseout 
    

  120. if(tab != savTab) 
    

  121. tab.bgColor = couleur1; 
    

  122. break; 
    

  123. case 2 : 
    

  124. // clic! 
    

  125. sav = savTab; 
    

  126. savTab = tab; 
    

  127. changeCouleur(sav,1); 
    

  128. tab.bgColor = couleur2; 
    

  129. break; 
    

  130. } 
    

  131. } 
    

  132.  
  133. function generate() 
    

  134. { 
    

  135. // Génération du menu 
    

  136. codeHTML = "<table width='834' border='0' cellspacing='0' cellpadding='0'><tr>"; 
    

  137.  
  138. for( i=0; i<nbMenu; i++){ 
    

  139. codeHTML += "<td onClick='ecrire(" + i + ")'>" + menu[i] + " </td>"; 
    

  140. } 
    

  141. codeHTML += "</tr></table><table><tr width='834' valign='top' class='sousmenu'>"; 
    

  142. codeHTML += "<div id='menu' style='position:relative;height:0px;top:0px;left:0px;visibility:visible;background-color:" + couleur1 + "'>"; 
    

  143. codeHTML += "</div></tr></table>"; 
    

  144.  
  145. document.write(codeHTML); 
    

  146.  
  147. codeCSS = "<style type='text/css'>"; 
    

  148. codeCSS += "td.menu {"; 
    

  149. codeCSS += " font-family: " + police + ";"; 
    

  150. codeCSS += " font-size: "+ tailleTexte +"px;"; 
    

  151. codeCSS += " color: " + couleurTexte + ";"; 
    

  152. codeCSS += " cursor: hand;"; 
    

  153. codeCSS += " background-color: " + couleur1 + ";"; 
    

  154. codeCSS += " border: 1px solid " + couleurBordure + ";"; 
    

  155. codeCSS += " }"; 
    

  156. codeCSS += "td.sousmenu {"; 
    

  157. codeCSS += " font-family: " + police + ";"; 
    

  158. codeCSS += " font-size: "+ tailleTexte +"px;"; 
    

  159. codeCSS += " color: " + couleurTexte + ";"; 
    

  160. codeCSS += " cursor: hand;"; 
    

  161. codeCSS += " background-color: " + couleur1 + ";"; 
    

  162. codeCSS += " border-top: 1px solid " + couleurBordure + ";"; 
    

  163. codeCSS += " border-right: 1px solid " + couleurBordure + ";"; 
    

  164. codeCSS += " border-bottom: 1px solid " + couleurBordure + ";"; 
    

  165. codeCSS += " border-left: 0px solid " + couleurBordure + ";"; 
    

  166. codeCSS += " }"; 
    

  167. codeCSS += "td {"; 
    

  168. codeCSS += " font-family: " + police + ";"; 
    

  169. codeCSS += " font-size: "+ tailleTexte +"px;"; 
    

  170. codeCSS += " color: " + couleurTexte + ";"; 
    

  171. codeCSS += " cursor: hand;"; 
    

  172. codeCSS += " }"; 
    

  173. codeCSS += "</style>"; 
    

  174.  
  175. document.write(codeCSS); 
    

  176. } 
    

  177. </script>

Merci de votre précieuse aide,

Fab 53

Autres pages sur : besoin aide javascript menu

Lassé par la pub ? Créez un compte
Expert Programmation

Salut,

Tu as essayé de lire le code que tu a collé dns ton message ? Qu'en penses-tu ?

Si comme nous, tu n'aimes pas, tu édite ton message (avec la petite icone qui va bien au dessus de ton message) et tu encadre ton code avec les balises fournies par l'icone C/C++ (présente au dessus de la zone de rédaction) :) 

A+ quand tu auras fait les modifs ;) 
Lassé par la pub ? Créez un compte

Créer un nouveau sujet