// JavaScript Document //Pour que IE puisse faire comme s'il comprenait //la pseudo-class :hover, nous allons définir une fonction //JavaScript qui sera chargée d'émuler le comportement CSS. function hover(obj){ if(document.all){ UL = obj.getElementsByTagName('ul'); if(UL.length > 0){ sousMenu = UL[0].style; if(sousMenu.display == 'none' || sousMenu.display == ''){ sousMenu.display = 'block'; }else{ sousMenu.display = 'none'; } } } } //Cette fonction prend comme argument l'objet HTML auquel //doit s'appliquer le comportement, en l'occurrence, //ce sera la balise LI qui va appeler la fonction. //Nous verrons par la suite comment appliquer ce comportement //exactement. En tout premier lieu, la fonction va vérifier //si le navigateur qui l'appelle est bien IE //(ou Opéra qui souffre du meme problème) //avec if(document.all) . //Si ce n'est pas le cas, rien ne se passera car //ce seront les CSS qui prendront le comportement en charge. //Ensuite, la fonction va rechercher s'il y a un sous-menu //disponible (matérialisé par la première balise UL incluse //dans notre objet HTML) avec la fonction getElementsByTagName. //Si un sous-menu est détecté, il ne reste plus qu'à modifier //son style d'affichage en fonction de son style d'affichage //précédent : soit le sous-menu est invisible et il faut le //rendre visible, soit le sous-menu est visible et il faut //le rendre invisible. //Pour résoudre ce problème, nous allons construire une fonction //JavaScript chargée d'appliquer automatiquement notre //comportement à nos balises LI : function setHover(){ LI = document.getElementById('colonne_menu').getElementsByTagName('li'); nLI = LI.length; for(i=0; i < nLI; i++){ LI[i].onmouseover = function(){ hover(this); } LI[i].onmouseout = function(){ hover(this); } } } //Pour qu'elle fonctionne correctement, cette fonction doit être //appelée APRÈS le chargement de notre menu. //Pour cela, nous l'appellerons à l'aide du comportement //onload de la balise BODY : //