problème de menu déroulant sous firefox

Version imprimable

Bonjour,

J'ai un problème avec le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
<tr>
<td nowrap onMouseOver="afficheCalque('Comediens')" onMouseOut="cacheCalque('Comediens')">&nbsp;</td>
</tr>
<tr>
<td width="95%" bordercolor="0" onmouseover="afficheCalque('Comediens')" onmouseout="cacheCalque('Comediens')"><div align="right">Comediens <img width="13" height="13" src="images/fleche.gif"> </div></td>
<td nowrap width="5%" onMouseOver="afficheCalque('Comediens')" onMouseOut="cacheCalque('Comediens')"><div id="Comediens" onMouseOver="afficheCalque('Comediens')" onMouseOut="cacheCalque('Comediens')" class="divListe">
<a href='./compagnie.php?page=entrepriseCulturelle&id_personne=14'>Mr X</a><br>
<a href='./compagnie.php?page=entrepriseCulturelle&id_personne=17'>Colonel moutarde</a><br>
<a href='./compagnie.php?page=entrepriseCulturelle&id_personne=9'>Melle Rose</a><br>
</div></td>
</tr>

Lorsque je survole la cellule, sous IE, ça m'affiche bien ce qu'il faut.
Quand je le fais avec firefox, ça ne fonctionne pas.

Pourquoi ?

Merci de votre aide,

Jérôme

10/11/2006, 12h00
gerald2545

tu as un petit outil dans Firefox qui s'appelle "Console Javascript", accessible dans le menu "Outils", qui peut t'être de grande utilité. IL devrait t'indiquer ce qui ne lui plaît pas
10/11/2006, 13h31
jeromed1

Oui, j'ai vu cet outil. Seulement, il ne me met aucune erreur, ni avertissement.
Et pourtant, ça ne fonctionne toujours pas.
On dirait que le onmouseover ne fonctionne pas. Mais je ne vois pas pourquoi...

OK, c'est bon j'ai trouvé le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
Exemple de page HTML :
-----------------------------------------------
<script type="text/javascript">
// Code JavaScript
 
function afficherMasquer()
/* change la classe CSS des objets donnés en paramètres. Syntaxe :
afficherMasquer('id_div1','afficher','id_div2','masquer','id_div3','masquer',...) */
{ 
   var args=afficherMasquer.arguments;
   var action, objet, css;
   
   // on parcours tous les arguments de la fonction
   for(var i=0; i<(args.length-1); i+=2)
   {
      if((objet=document.getElementById(args[i]))!=null)
      {
         action=args[i+1];
         switch(action)
         {
            /* la valeur de "css" est à remplacer avec les noms des classes
            utilisées dans la feuille de style */
            case 'afficher':
            case '1':
               css='apparent';
               break;
 
            case 'masquer':
            case '0':
            default:
               css='cache';
         }
         
         objet.className=css;
      }
   }
}
</script>
 
<style type="text/css">
/* Feuille de styles */
 
.apparent
{
   /* attributs obligatoires */
   visibility: visible;
   display: block;
 
   /* d'autres attributs de votre choix... */
   width: 140px;
   padding: 4px 10px;
   margin-bottom: 3px;
}
 
.cache
{
   /* uniques attributs de cette classe */
   visibility: hidden;
   display: none;
}
</style>
 
<!-- Code HTML : exemple de menu -->
<div id="menu_1">
   <a href="/menu1/index.htm" onMouseOver="afficherMasquer('sous_menu_1','afficher', 'sous_menu_3','masquer')">Menu 1</a>
</div>
<div id="sous_menu_1" class="cache">
   Sous-menu du Menu 1<br />
   <a href="/menu1/rubrique1.htm">Rubrique 1</a><br />
   <a href="/menu1/rubrique2.htm">Rubrique 2</a><br />
   <a href="/menu1/rubrique3.htm">Rubrique 3</a>
</div>
 
<div id="menu_2">
   <a href="/menu2/index.htm">Menu 2</a>
</div>
 
<!-- variante : on utilise la fonction JavaScript avec un autre événement... -->
<div id="menu_3">
   <a href="#" onClick="afficherMasquer('sous_menu_3','1', 'sous_menu_1','0')">Ouvrir Menu 3</a>
</div>
<div id="sous_menu_3" class="cache">
   Sous-menu du Menu 3<br />
   <a href="/menu3/rubrique1.htm">Rubrique 1</a><br />
   <a href="/menu3/rubrique2.htm">Rubrique 2</a>
</div>
 
<div id="menu_4">
   <a href="/menu4/index.htm">Menu 4</a>
</div>