Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1255 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu JS qui ne marche pas avec IE

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Menu JS qui ne marche pas avec IE

n°1646741
cuhbe
Posté le 21-11-2007 à 18:46:58  profilanswer
 

Bonjour,
j'ai fait un menu (copié je ne sais plus où) mais il ne fonctionne qu'avec firefox.
Voici le code:

Code :
  1. <DIV class=menu id=wrap align=left>
  2. <TABLE class=menu id=menu cellSpacing=0 cellPadding=5 width="100%" name="menu">
  3. <TBODY>
  4. <TR>
  5. <TD><A id=menu0 href="index.html"><B>Accueil</A></B></TD></TR>
  6. <TR>
  7. <TD><A id=menu11 href="javascript:void(0)"><B>Les Sports&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<IMG height=17 src="fleche.gif" width=38 align=top border=0></A></B></TD></TR>
  8. <TR>
  9. <TD><A id=menu1 href="javascript:void(0)"><B>L'art&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<IMG height=17 src="fleche.gif" width=38 align=top border=0></A></B></TD></TR>
  10. <TR>
  11. <TD><A id=menu20 href="javascript:void(0)"><B>Char de la St Jean</B>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<IMG height=17 src="fleche.gif" width=38 align=top border=0></A></TD></TR></TBODY></TABLE></DIV>
  12. <DIV id=subwrap>
  13. <SCRIPT type=text/javascript>
  14. <!--
  15. if (TransMenu.isSupported()) {
  16. var ms = new TransMenuSet(TransMenu.direction.right, 5, -2, TransMenu.reference.topRight);
  17. var menu0 = ms.addMenu(document.getElementById("menu0" ));
  18. var menu11 = ms.addMenu(document.getElementById("menu11" ));
  19. menu11.addItem("BADMINTON", "badminton.html", "0" );
  20. menu11.addItem("BASKET", "basket.html", "0" );
  21. menu11.addItem("CYCLO", "cyclo.html", "0" );
  22. menu11.addItem("DANSE Hip-Hop", "hiphop.html", "0" );
  23. menu11.addItem("DANSE", "danse.html", "0" );
  24. menu11.addItem("GYM ENTRETIEN MATIN", "gymmatin.html", "0" );
  25. menu11.addItem("GYM ENTRETIEN SOIR", "gymsoir.html", "0" );
  26. menu11.addItem("GYM TONY'C", "gymtonyc.html", "0" );
  27. menu11.addItem("JUDO", "judo.html", "0" );
  28. menu11.addItem("MUSCULATION", "musculation.html", "0" );
  29. menu11.addItem("TENNIS DE TABLE", "tennisdetable.html", "0" );
  31. var menu1 = ms.addMenu(document.getElementById("menu1" ));
  32. menu1.addItem("ARTS PLASTIQUES", "artsplastiques.html", "0" );
  33. var menu3 = menu1.addMenu(menu1.items[0],0,0);
  34. menu1.addItem("COUTURE", "couture.html", "0" );
  35. var menu20 = ms.addMenu(document.getElementById("menu20" ));
  36. menu20.addItem("CHAR", "char.html", "0" );
  38. function init() {
  39. if (TransMenu.isSupported()) {
  40. TransMenu.initialize();
  41. menu0.onactivate = function() {document.getElementById("menu0" ).className = "hover"; };
  42. menu0.ondeactivate = function() {document.getElementById("menu0" ).className = ""; };
  43. menu11.onactivate = function() {document.getElementById("menu11" ).className = "hover"; };
  44. menu11.ondeactivate = function() {document.getElementById("menu11" ).className = ""; };
  45. menu1.onactivate = function() {document.getElementById("menu1" ).className = "hover"; };
  46. menu1.ondeactivate = function() {document.getElementById("menu1" ).className = ""; };
  47. menu20.onactivate = function() {document.getElementById("menu20" ).className = "hover"; };
  48. menu20.ondeactivate = function() {document.getElementById("menu20" ).className = ""; };
  50. }}
  51. TransMenu.dingbatSize = 0;
  52. TransMenu.spacerGif = "";
  53. TransMenu.dingbatOn = "";
  54. TransMenu.dingbatOff = "";
  55. TransMenu.sub_indicator = false;
  56. TransMenu.menuPadding = 15;
  57. TransMenu.itemPadding = 15;
  58. TransMenu.shadowSize = 2;
  59. TransMenu.shadowOffset = 3;
  60. TransMenu.shadowColor = "#888";
  61. TransMenu.shadowPng = "http://www.swmenu.com/modules/mod_swmenufree/images/transmenu/grey-40.png";
  62. TransMenu.backgroundColor = "#FFCC99";
  63. TransMenu.backgroundPng = "http://www.swmenu.com/modules/mod_swmenufree/images/transmenu/white-90.png";
  64. TransMenu.hideDelay = 600;
  65. TransMenu.slideTime = 300;
  66. TransMenu.selecthack =1;
  67. TransMenu.renderAll();
  68. if ( typeof window.addEventListener != "undefined" )
  69. window.addEventListener( "load", init, false );
  70. else if ( typeof window.attachEvent != "undefined" ) {
  71. window.attachEvent( "onload", init);
  72. }else{
  73. if ( window.onload != null ) {
  74. var oldOnload = window.onload;
  75. window.onload = function ( e ) {
  76. oldOnload( e );
  77. init();
  78. }
  79. }else
  80. window.onload = init();
  81. }
  82. }
  83. -->
  84. </SCRIPT>
  86. <DIV class="transMenu top" id=TransMenu0 style="VISIBILITY: hidden; WIDTH: 4px; HEIGHT: 4px">
  87. <DIV class=content style="LEFT: -4px; WIDTH: 2px; HEIGHT: 2px">
  88. <TABLE class=items cellSpacing=0 cellPadding=0 border=0>
  89. <TBODY></TBODY></TABLE>
  90. <DIV class=shadowBottom><IMG height=1 src="" width=1></DIV>
  91. <DIV class=shadowRight style="LEFT: 0px"><IMG height=1 src="" width=1></DIV>
  92. <DIV class=background style="WIDTH: 0px; HEIGHT: 0px; BACKGROUND-COLOR: #ffcc99"><IMG height=1 src="" width=1></DIV></DIV></DIV>
  93. <DIV class="transMenu top" id=TransMenu1>
  94. <DIV class=content>
  95. <TABLE class=items cellSpacing=0 cellPadding=0 border=0>
  96. <TBODY>
  97. <TR class=item>
  98. <TD id=TransMenu1-0 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>BADMINTON</TD></TR>
  99. <TR class=item>
  100. <TD id=TransMenu1-1 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>BASKET</TD></TR>
  101. <TR class=item>
  102. <TD id=TransMenu1-2 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>CYCLO</TD></TR>
  103. <TR class=item>
  104. <TD id=TransMenu1-3 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>DANSE Hip-Hop</TD></TR>
  105. <TR class=item>
  106. <TD id=TransMenu1-4 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>DANSE</TD></TR>
  107. <TR class=item>
  108. <TD id=TransMenu1-5 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>GYM ENTRETIEN MATIN</TD></TR>
  109. <TR class=item>
  110. <TD id=TransMenu1-6 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>GYM ENTRETIEN SOIR</TD></TR>
  111. <TR class=item>
  112. <TD id=TransMenu1-7 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>GYM TONY'C</TD></TR>
  113. <TR class=item>
  114. <TD id=TransMenu1-8 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>JUDO</TD></TR>
  115. <TR class=item>
  116. <TD id=TransMenu1-9 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>MUSCULATION</TD></TR>
  117. <TR class=item>
  118. <TD id=TransMenu1-10 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>TENNIS DE TABLE</TD></TR></TBODY></TABLE>
  119. <DIV class=shadowBottom><IMG height=1 src="" width=1></DIV>
  120. <DIV class=shadowRight><IMG height=1 src="" width=1></DIV>
  121. <DIV class=background><IMG height=1 src="" width=1></DIV></DIV></DIV>
  122. <DIV class="transMenu top" id=TransMenu2>
  123. <DIV class=content>
  124. <TABLE class=items cellSpacing=0 cellPadding=0 border=0>
  125. <TBODY>
  126. <TR class=item>
  127. <TD id=TransMenu2-0 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>ARTS PLASTIQUES</TD></TR>
  128. <TR class=item>
  129. <TD id=TransMenu2-1 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>COUTURE</TD></TR></TBODY></TABLE>
  130. <DIV class=shadowBottom><IMG height=1 src="" width=1></DIV>
  131. <DIV class=shadowRight><IMG height=1 src="" width=1></DIV>
  132. <DIV class=background><IMG height=1 src="" width=1></DIV></DIV></DIV>
  133. <DIV class=transMenu id=TransMenu3>
  134. <DIV class=content>
  135. <TABLE class=items cellSpacing=0 cellPadding=0 border=0>
  136. <TBODY></TBODY></TABLE>
  137. <DIV class=shadowBottom><IMG height=1 src="" width=1></DIV>
  138. <DIV class=shadowRight><IMG height=1 src="" width=1></DIV>
  139. <DIV class=background><IMG height=1 src="" width=1></DIV></DIV></DIV>
  140. <DIV class="transMenu top" id=TransMenu4>
  141. <DIV class=content>
  142. <TABLE class=items cellSpacing=0 cellPadding=0 border=0>
  143. <TBODY>
  144. <TR class=item>
  145. <TD id=TransMenu4-0 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>CHAR</TD></TR></TBODY></TABLE>
  146. <DIV class=shadowBottom><IMG height=1 src="" width=1></DIV>
  147. <DIV class=shadowRight><IMG height=1 src="" width=1></DIV>
  148. <DIV class=background><IMG height=1 src="" width=1></DIV></DIV>


Et le style correspondant :  
 

Code :
  1. <STYLE type=text/css>
  2. <!--
  3. .transMenu {
  4. position:absolute ;
  5. overflow:hidden;
  6. left:-1000px;
  7. top:-1000px;
  8. }
  9. .transMenu .content {
  10. position:absolute;
  11. }
  12. .transMenu .items {
  13. border: 0px solid #FFFFFF ;
  14. position:relative ;
  15. left:0px; top:0px;
  16. z-index:2;
  17. }
  18. .transMenu  td
  19. {
  20. padding: 5px 5px 5px 5px; 
  21. font-size: 12px;
  22. font-family: Arial, Helvetica, sans-serif;
  23. text-align: left;
  24. font-weight: bold;
  25. color: #000000;
  26. }
  27. #subwrap
  28. {
  29. text-align: left ;
  30. }
  31. .transMenu  .item.hover td
  32. { 
  33. color: #FFFFFF;
  34. }
  35. .transMenu .item td{
  36. border:2px solid #666666;
  37. border-style:ridge;
  38. text-decoration: none ;
  39. cursor:pointer;
  40. cursor:hand;
  41. }
  42. .transMenu .background {
  43. background-color: #FFCC99;
  44. position:absolute ;
  45. left:0px; top:0px;
  46. z-index:1;
  47. -moz-opacity:0.85;
  48. filter:alpha(opacity=85);
  49. }
  50. .transMenu .shadowRight {
  51. position:absolute ;
  52. z-index:3;
  53. top:-3000px; width:2px;
  54. -moz-opacity:0.85;
  55. filter:alpha(opacity=85)
  56. }
  57. .transMenu .shadowBottom {
  58. position:absolute ;
  59. z-index:1;
  60. left:-3000px; height:2px;
  61. -moz-opacity:0.85;
  62. filter:alpha(opacity=85)
  63. }
  64. .transMenu .item.hover {
  65. background-color: #FF6600;
  66. }
  67. .transMenu .item img {
  68. margin-left:10px;
  69. }
  70. table.menu {
  71. top: 0px;
  72. left: 0px;
  73. position:relative;
  74. margin:0px;
  75. border: 0px;
  76. z-index: 1;
  77. }
  78. table.menu a{
  79. margin:0px;
  80. padding: 5px 5px 5px 5px;
  81. display:block;
  82. position:relative;
  83. border:2px solid #666666; 
  84. }
  85. div.menu a,
  86. div.menu a:visited,
  87. div.menu a:link {
  88. font:bold;
  89. font-size: 16px;
  90. font-family: Arial, Helvetica, sans-serif;
  91. text-align: left; 
  92. color: #FF9933;
  94. text-decoration: none;
  95. margin-bottom:0px;
  96. display:block;
  97. white-space:nowrap ;
  98. }
  99. div.menu td {
  100. border-right: 2px solid #666666 ;
  101. border-top: 2px solid #666666 ;
  102. border-left: 2px solid #666666 ;
  103. background-color: #FFFFFF;
  104. border-bottom: 2px solid #666666 ; 
  105. }
  106. div.menu td.last {
  108. }
  109. #trans-active a{
  110. color: #FFFFFF;
  111. background-color: #33CCFF;
  112. }
  113. #menu a.hover   {
  114. color: #FFFFFF;
  115. background-color: #33CCFF;
  116. }
  117. #menu span {
  118. display:none;
  119. }
  120. body {
  121. background-color: #FF9966;
  122. }
  125. -->
  126. </STYLE>


 
désolé pour la présentation mais je suis sous un poste de l'université n'ayant que IE donc c'est la merde pour récupérer le code. bref
 
Vous pouvez trouver la page sur http://cuhbe.free.fr/site%20FJEPS/test.html
 
Si quelqu'un sait ce que je doit changer pour que le menu fonctionne sous IE ainsi que firefox , merci de me le dire par avance :)
 
Bye.

mood
Publicité
Posté le 21-11-2007 à 18:46:58  profilanswer
 

n°1646759
mIRROR
Chevreuillobolchévik
Posté le 21-11-2007 à 19:33:33  profilanswer
 

je connais pas onactivate / ondeactivate
essaie avec onmouseover onmouseout


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
n°1647039
gatsu35
Blablaté par Harko
Posté le 22-11-2007 à 10:31:16  profilanswer
 

je recommande de jeter ce menu à la poubelle

n°1647129
mIRROR
Chevreuillobolchévik
Posté le 22-11-2007 à 12:46:53  profilanswer
 

s'il fallait jeter un truc c est la page entière hein
mais comme c etait pas trop constructif j ai préféré l'être un peu plus [:dockbchris]


Message édité par mIRROR le 22-11-2007 à 12:47:09

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
n°1651197
cuhbe
Posté le 29-11-2007 à 23:21:14  profilanswer
 

lol
 
ok
 
des conseils sinon ?
autre que de tout jeter. Genre pour faire un beau menu pratique, et pas moche.
 
Merci.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu JS qui ne marche pas avec IE

 

Sujets relatifs
Menu images, espace dans IE6 lorsqu'on agrandit la taille du textepositionnement du menu effet dock
Problème de menu en cascade avec FirefoxCSS: pourquoi ça marche pas ?
[VB] Menu dynamiqueProbleme de menu
swf en boucle | loop="false" ne marche pasliste menu associé a un panier
[XSLT]Récursivité[wxPython] Pop-up menu
Plus de sujets relatifs à : Menu JS qui ne marche pas avec IE

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.127 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR