En fait, le code exact est celui-ci, sachant que j'utilise un fichier IEmen.htc et un fichier style2.css pour que ça soit compatible avec IE :
extrait du fichier index.html : ...
<body>
<LINK rel="stylesheet" type="text/css" href="style.css" />
<!-- ce qui suit ne sera visible que sur IE 5 ou version d'après, grace à la condition -->
<!--[if gte IE 5]>
<LINK rel="stylesheet" type="text/css" href="style2.css" />
<![endif]-->
<ul class="Menu1">
<li class="Menu1_PremiereLigne">Présentation
<ul class="Menu2">
<li class="Menu2_PremiereLigne"><a href="cat.html">Editos "Le Duo vu par ..." M. le Maire</a></li>
<li class="Menu2_Ligne"><a href="rabbit.html">Présentation des lieux</a>
<ul class="Menu3">
<li class="Menu3_PremiereLigne">Auditorium</li>
<li class="Menu3_DerniereLigne">architecture exceptionnelle</li>
</ul>
</li>
<li class="Menu2_DerniereLigne"><a href="dingo.html">Sous-menu 1.2</a></li>
</ul>
</li>
<li class="Menu1_Ligne">Saison 04>>05
<ul class="Menu2">
<li class="Menu2_PremiereLigne">Elephant >>
<ul class="Menu3">
<li class="Menu3_PremiereLigne"><a href="indian.html">Indian</a></li>
<li class="Menu3_DerniereLigne"><a href="african.html">African</a></li>
</ul>
</li>
<li class="Menu2_Ligne"><a href="monkey.html">Monkey</a></li>
<li class="Menu2_DerniereLigne"><a href="dog.html">Dog</a></li>
</ul>
</li>
<li class="Menu1_Ligne">Tarifs et réservations
<ul class="Menu2">
<li class="Menu2_PremiereLigne"><a href="pig.html">Pig</a></li>
<li class="Menu2_Ligne"><a href="bird.html">Bird</a></li>
<li class="Menu2_DerniereLigne"><a href="worm.html">Worm</a></li>
</ul>
</li>
<li class="Menu1_DerniereLigne">Renseignements
<ul class="Menu2">
<li class="Menu2_PremiereLigne"><a href="bat.html">Bat</a></li>
<li class="Menu2_Ligne"><a href="fish.html">Fish</a></li>
<li class="Menu2_DerniereLigne"><a href="panther.html">Panther</a></li>
</ul>
</li>
</ul>
</body>
extrait du fichier style.css (je n'ai pas tout mis car le fichier style.css est assez gros):...
/* Déplacement sur la première ligne du menu 1 */
li.Menu1_PremiereLigne:hover, li.Menu1_PremiereLigne.CSStoHighlight
{
background-image:url(images/Menu1_PremiereLigne_over.gif); /* image du menu lors du rollover */
color: #FFFFFF; /* couleur du texte du menu actif */
z-index:100; /* pour éviter les problèmes de superposition des menus et sous-menus*/
}
/* Déplacement sur une ligne du menu 1 (sauf première et dernière ligne) */
li.Menu1_Ligne:hover, li.Menu1_Ligne.CSStoHighlight
{
background-image:url(images/Menu1_Ligne_over.gif); /* image du menu lors du rollover */
color: #FFFFFF; /* couleur du texte du menu actif */
z-index:100; /* pour éviter les problèmes de superposition des menus et sous-menus*/
}
/* Déplacement sur la dernière ligne du menu 1 */
li.Menu1_DerniereLigne:hover, li.Menu1_DerniereLigne.CSStoHighlight
{
background-image:url(images/Menu1_DerniereLigne_over.gif); /* image du menu lors du rollover */
color: #FFFFFF; /* couleur du texte du menu actif */
z-index:100; /* pour éviter les problèmes de superposition des menus et sous-menus*/
}
extrait du fichier style2.css :
ul.Menu1 li.Menu1_PremiereLigne, ul.Menu1 li.Menu1_Ligne, ul.Menu1 li.Menu1_DerniereLigne,
ul.Menu2 li.Menu2_PremiereLigne, ul.Menu2 li.Menu2_Ligne, ul.Menu2 li.Menu2_DerniereLigne,
ul.Menu3 li.Menu3_PremiereLigne, ul.Menu3 li.Menu3_Ligne, ul.Menu3 li.Menu3_DerniereLigne
{ /* the behaviour to mimic the li:hover rules in IE 5+ */
behavior: url( IEmen.htc );
}
ul.Menu2, ul.Menu3
{ /* copy of above declaration without the > selector */
display: none; position: absolute; top: 2px; left: 78px;
}
fichier IEmen.htc :...
<attach event="onmouseover" handler="rollOver" />
<attach event="onmouseout" handler="rollOff" />
<script type="text/javascript">
function rollOver() {
//change the colour
element.className += (element.className?' ':'') + 'CSStoHighlight';
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].className += (element.childNodes[x].className?' ':'') + 'CSStoShow'; }
if( element.childNodes[x].tagName == 'A' ) { element.childNodes[x].className += (element.childNodes[x].className?' ':'') + 'CSStoHighLink'; }
}
}
function rollOff() {
//change the colour
element.className = element.className.replace(/ ?CSStoHighlight$/,'');
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].className = element.childNodes[x].className.replace(/ ?CSStoShow$/,''); }
if( element.childNodes[x].tagName == 'A' ) { element.childNodes[x].className = element.childNodes[x].className.replace(/ ?CSStoHighLink$/,''); }
}
}
</script>
J'ai copié/collé quasiment tout le code important de mes pages.
Ce code fonctionne très bien sur tous les navigateurs. Mon seul problème concerne le fameux background-image dont je vous ai parlé au début.
Si il est vrai que le ":hover" n'est pas bien traduit sur IE, alors c'est la fonction incluse dans le fichier IEmen.htc qui s'occupe de simuler cette propriété. Cependant, je ne maîtrise pas tout dans le contenu du fichier IEmen.htc. C'est surtout la propriété CSStoHighlight que je ne connais pas trop.
Excusez-moi car je ne vous avais pas donné assez d'infos dans mon premier message.
Est-ce que ceci vous inspire plus ?
Merci.
Seb.
) ?
