[HTML,JS] ........HELP ME PLEASE Je vais devenir dingue...........

........HELP ME PLEASE Je vais devenir dingue........... [HTML,JS] - HTML/CSS - Programmation

Marsh Posté le 22-07-2002 à 10:45:32    

Salut a tous,
je voudrais faire un menu deroulant pour une toolbar horizontale.
 
Je m explique, g fait un tableau de 1 ligne et dans chaque cellule g applique une image.
De plus, g mis un petit bout de JS pour faire du rollover (action onMouseOver du lien de l image).
 
Maintenant je voudrais faire un menu deroulant pourchque cellule mais je n y arrive pas.... :'(
 
G trouve un script plutot pas mal ki selon le nom de la class faisait une action (pour differencier la cellule menu de l item du menu).
Ce script marche nickel je l ais teste mais pas pour mon application :fou:
Il marche pour une cellule de tableau avec du texte mais des que je mets mon image vlan plus rien ne marche comme si il ne detectait pas l objet faisant appel au JSscript pour afficher le menu :eek2:
 
Je ne comprends pas help me please si vous savez resoudre ce pb ou si vous avez une autre solution pour faire ce menu deroulant avec image en rollover... :'( :'( :'( :'( :'(

Reply

Marsh Posté le 22-07-2002 à 10:45:32   

Reply

Marsh Posté le 22-07-2002 à 10:57:10    

Si j'ai bien compris, tu veux faire des menus déroulants personnalisés sans utiliser la balise <select>, c'est ça?
 
Donc je pense que tu dois utiliser des <div>, non?
 
Mais déjà, pour commencer, si tu veux qu'on t'aide à comprendre ce qui foire dans ton script, 'faudrait peut-être commencer par le mettre dans ton post, non?

Reply

Marsh Posté le 22-07-2002 à 11:03:50    

Voila le script appele :
 

Code :
  1. function MenuEffets() {
  2.         var cls = event.srcElement.className;
  3.         var isClassContainer = cls == "td_furtif";
  4.         var isClassPopup = cls == "menu_deroulant";
  5.         var isClassMenuitem = cls == "objet_du_menu";
  7.         if (isClassContainer) {
  8.             if (event.type == "mouseover" )
  9.                 event.srcElement.all(0).style.display = "block";
  10.             else {
  11.                  if (!event.fromElement.contains(event.toElement))
  12.                     event.srcElement.all(0).style.display = "none";
  13.             }
  14.         }
  16.         if (isClassPopup) {
  17.             if (event.type == "mouseout" && !event.fromElement.contains(event.toElement)){
  18.   event.srcElement.style.display = "none";
  19.  }
  20.         }
  22.         if (isClassMenuitem) {
  23.             if (event.type == "mouseover" ) {
  24.                 event.srcElement.style.color = couleur_police_rollover;
  25.                 event.srcElement.style.backgroundColor = couleur_fond_rollover;
  26.             }
  28.             else {
  29.                 event.srcElement.style.color = couleur_police;
  30.                 event.srcElement.style.backgroundColor = couleur_fond;
  32.                 if (!event.fromElement.parentElement.parentElement.parentElement.parentElement.contains(event.toElement))
  33.                     event.srcElement.parentElement.parentElement.parentElement.style.display = "none";
  34.             }
  35.         }
  36.     }
  38.     //var maintenant = New Date();
  39.     //var sec = maintenant.getTime();  
  40.     document.onmouseover = MenuEffets;
  41.     document.onmouseout = MenuEffets;
  43.     document.write('<STYLE>');
  44.     document.write('.menu {font-family: Verdana, Arial, Helvetica, Tahoma, MS Sans Serif;');
  45.     document.write('          font-size: '+ taille_police +'pt;');
  46.     document.write('          color: '+ couleur_police +';');
  47.     document.write('          cursor: default; }');
  49.     document.write('.menu_deroulant {position: absolute;');
  50.     document.write('        display: none;');
  51.     document.write('        border-collapse: collapse;');
  52.     document.write('        border-style: solid;');
  53.     document.write('        border-width: 1px;');
  54.     document.write('        border-color: '+ couleur_bordure + ';');
  55.     document.write('        background-color: '+ couleur_fond + ';');
  56.     document.write('        width: '+ taille_menu_deroule +'px;');
  57.     document.write('        left: expression(this.parentElement.offsetLeft + 10);');
  58.     document.write('        top: expression((this.parentElement.parentElement.parentElement.parentElement.offsetTop + this.parentElement.parentElement.parentElement.parentElement.offsetHeight-3) );');
  59.     document.write('        font-family: Verdana, Arial, Helvetica, Tahoma, MS Sans Serif;');
  60.     document.write('        font-size: '+taille_police+'pt;');
  61.     document.write('        color: '+ couleur_police +'; }');
  63.     document.write('.objet_du_menu {border-style: solid;');
  64.     document.write('           border-width: 0px;');
  65.     document.write('           border-color: '+ couleur_bordure +';');
  66.     document.write('           cursor: hand; }');
  68.     document.write('.td_furtif {');
  69.     document.write('        border-style: solid;');
  70.     document.write('           border-width: 1px;');
  71.     document.write('           border-color: '+ couleur_bordure +';');
  72.     document.write('           background-color: '+ couleur_fond +';');
  73.     document.write('           cursor: hand; }');
  74.     document.write('</STYLE>');


 
et voici le code de mon premier bouton que je voudrais avoir en menu deroulant mais il ne reconnait pas la class ou se trouve mon image (si je la vire ca marche :fou: ) :
 

Code :
  1. <table class="menu" border="1" cellspacing="0" width="800" id="AutoNumber2" height="30" bordercolor="#000000" style="border-collapse: collapse; " cellpadding="0">
  2.     <td class="td_furtif" width="50" height="30" bgcolor="#0000A6" bordercolor="#000000" style="border-left-style: solid; border-left-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1"> </td>
  3.     <td class="td_furtif" width="100" height="30" bgcolor="#0000A6" bordercolor="#000000" style="border-top-color: #000000; border-top-width: 1; border-bottom-color: #000000; border-bottom-width: 1; border-left-style:solid; border-left-width:1" align="center">
  4.     <p align="center">
  5.     <a href="index.htm"
  6.     onMouseOver="pic_home.src='images/Home_Down.gif';MenuEffets;"
  7.     onMouseOut="pic_home.src='images/Home_Up.gif'">
  8.     <img name="pic_home" border="0" src="images/Home_Up.gif" width="100" height="30"></a>
  9.    
  10.      <TABLE CLASS="menu_deroulant">
  11.             <TR><TD CLASS="objet_du_menu" onClick="javascript:window.location='http://www.adresse.com/'">Nouveau Message</TD></TR>
  12.             <TR><TD CLASS="objet_du_menu" onClick="javascript:window.location='http://www.adresse.com/'">Lire Un Message</TD></TR>
  13.             <TR><TD CLASS="objet_du_menu" onClick="javascript:window.location='http://www.adresse.com/'">Répondre</TD></TR>
  14.         </TABLE>
  15. </td>

Reply

Marsh Posté le 22-07-2002 à 11:05:20    

Arf g oublie de virer l appel au menu effect dans le onmouseover du lien de l image c etait pour faire un test mais ca ne marche pas non plus...

Reply

Marsh Posté le 22-07-2002 à 12:16:43    

Le truc que j aimerais savoir c si dans le script il fait la recup du nom de la class avec le event.srcElement.className ben POURQUOI CA NE FCT PAS SI JE MET CLASS="LE NOM Q U IL FAUT " DANS LE LIEN DE MON IMAGE OU SE TROUVE LES APPELS D EVENEMENTS ONMOUSEOVER ETC...
 

Reply

Marsh Posté le 22-07-2002 à 16:07:21    

Aller Up !
 
Aller une petite suggestion n ayez pas peur je suis suffisemment desespere pour prendre n importe quelle reponse histoire de bosser un peu....
 
C vraimnet le merdier le JS :fou:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed