Discussion :

[jeromed1]

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[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...

[jeromed1]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>