Mon menu deroulant ne fonctionne pas avec IE6

gaya_102 -
mpmp93 Messages postés 2931 Date d'inscription Statut Membre Dernière intervention - 19 avr. 2013 à 09:03

Bonjour,
voila mon menu déroulant ne fonctionne pas avec IE6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Jour J</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


 
<link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />


<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="JsonPropre.js"></script>
<script type="text/javascript" src="demo1.js"></script>



	   <script type="text/javascript">
window.attachEvent("onload", function() {
Galery('toffe');
});		</script>
	   </head>
 
   <body>
       <div id="rubrique">        
           
		   <?php
include("menu.php");
?> 
           <div id="texte"> 
		   <br>
<h2>Toffee</h2>
		   
		   <P>La présentation de ne serait pas complète sans présenter Toffee de la race « les chats d’amour ».</P>
		   
<p>Toffee a débarqué un soir de juillet 2002 dans la vie d’Emeline : elle est arrivée du boulevard de Belleville à Paris en moto cachée dans le blouson de moto !</p>
 
<p>A l’époque elle avait à peine 5 semaine.</p>

<p>
				<ul id="toffe">
					<li><img src="image/toffe.jpg" alt="image/toffe.jpg" /></li>
					
				</ul>
			</p>	

 <p>Comment ne pas craquer devant cette petite boule de poil !</p>
 
 
<p>Elle a d’abord suivi la vie étudiante de sa maîtresse à Rennes. Puis après un court passage de quelques mois chez ses grands-parents elle s’est installée à Rueil Malmaison où elle a rencontré Julien !</p>

<p>Elle a commencé a apprécié le balcon dans le premier appartement d’Emeline et Julien (0019) et continue aujourd’hui à Chatou sa vie de chat ou plutôt de PACHA !</p>

<p>Mais bon, ses maîtres lui pardonne car elle est d’une aide particulièrement active dans les préparatifs du mariage </p>



		   
		   
		   </div>
		 
		   
		   </div>
		 
		   
		   	<script type="text/javascript">
			var imgs = document.getElementsByTagName('img');
			
			for (var i = 0; i < imgs.length; i++)
			{
				if (imgs[i].className == 'rollOver')
				{
					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].className = '';
				}
			}
			
			</script>
   </body>
</html>

le code de la page java script

function gebcn(class) {
	if (document.getElementsByClassName) {
		return document.getElementsByClassName(class);
	}
	else {
		var all = document.getElementsByTagName("*"),
		res = [];
		for (var i=0,l=all.length;i<l;i++) {
			if (all[i].className == class) {
				res.push(all[i]);
			}
		}
		return res;
	}
}

sfHover = function() {
	var sfEls = gebcn("deroulant");
	
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover = function() {
			this.getElementsByTagName("ul")[0].style.display = "block";
		};
		sfEls[i].onmouseout = function() {
			this.getElementsByTagName("ul")[0].style.display = "none";
		};
	}
};


window.onload = function() {
	var imgs = document.getElementsByTagName('img');
	
	for (var i = 0; i < imgs.length; i++)
	{
		if (imgs[i].className == 'rollOver')
		{
			imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
			imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
			imgs[i].className = '';
		}
	}
	sfHover();
	Galery('toffe');
};

Pouvez vous m'aider?

Configuration: Windows XP
Firefox 3.0.8

Afficher la suite

5 réponses

Réponse 1 / 5
math 2000 Messages postés 2589 Date d'inscription Statut Membre Dernière intervention 405

http://bormat2.free.fr/wordpress4/
tu auras un menu css compatible ie6
1
1. gaya_102
  
  si je comprend bien il faut utiliser un tableau pour que ça soit compatible?
  
  0
Réponse 2 / 5
math 2000 Messages postés 2589 Date d'inscription Statut Membre Dernière intervention 405

led tableaux c'est que pour ie les autre ne le verront pas
donc ta sintaxe et ton code sera toujours valide
0
1. gaya_102
  
  ok merci de ton conseil mais ca y est je viens juste de résoudre mon problème.
  En tout cas merci de ton aide
  
  0
2. hassna
  
  t'as resourdé ton prblm alors dits nous comment car moi aussi j'ai le mm problém et j'arrive pas a avoir la solution
  
  0

math 2000 Messages postés 2589 Date d'inscription Statut Membre Dernière intervention 405

ha mais ça seraais simpas de dire comment tu as utiliser un hack ?

gaya_102

ok voila le code de mes pages

la page dans laquelle j'inclus mon menu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Jour J</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


 
<link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />


<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="JsonPropre.js"></script>
<script type="text/javascript" src="demo1.js"></script>



	
	   </head>
 
   <body>
       <div id="rubrique">        
           
		   <?php
include("menu21.php");
?> 
           <div id="texte"> 
		   <br>
<h2>Toffee</h2>
		   
		   <P>La présentation de ne serait pas complète sans présenter Toffee de la race « les chats d’amour ».</P>
		   
<p>Toffee a débarqué un soir de juillet 2002 dans la vie d’Emeline : elle est arrivée du boulevard de Belleville à Paris en moto cachée dans le blouson de moto !</p>
 
<p>A l’époque elle avait à peine 5 semaine.</p>

<p>
				<ul id="toffe">
					<li><img src="image/toffe.jpg" alt="image/toffe.jpg" /></li>
					
				</ul>
			</p>	

 <p>Comment ne pas craquer devant cette petite boule de poil !</p>
 
 
<p>Elle a d’abord suivi la vie étudiante de sa maîtresse à Rennes. Puis après un court passage de quelques mois chez ses grands-parents elle s’est installée à Rueil Malmaison où elle a rencontré Julien !</p>

<p>Elle a commencé a apprécié le balcon dans le premier appartement d’Emeline et Julien (0019) et continue aujourd’hui à Chatou sa vie de chat ou plutôt de PACHA !</p>

<p>Mais bon, ses maîtres lui pardonne car elle est d’une aide particulièrement active dans les préparatifs du mariage </p>



		   
		   
		   </div>
		 
		   
		   </div>
		 
		   
		   	<script type="text/javascript">
			var imgs = document.getElementsByTagName('img');
			
			for (var i = 0; i < imgs.length; i++)
			{
				if (imgs[i].className == 'rollOver')
				{
					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].className = '';
				}
			}
			
			</script>
   </body>
</html>

la page du menu

<div id="second">
    <a href="index.html"><img id="logo" src="image/emeline_rub.jpg" alt="image/emeline_rub" /></a>
    <ul id="menuHorizon">
          <li class="deroulant" style="width:156px"><a href="presentation.php"><img src="image/presentation_rub_off.jpg" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>            
            <ul>
          	  <li><a href="leurhistoire.php">Leur histoire</a></li>
          	  <li><a href="lesparents.php">Les parents des mariés</a></li>
          	  <li><a href="lestemoins.php">Les témoins</a></li>
          	  <li><a href="enfantshonneurs.php">Les enfants d/'honneurs</a></li>
          	  <li><a href="toffe.php">Toffee</a></li>
             </ul>
            </li>
 
        	  <li><img src="image/oiseau1_rub.jpg" alt="image/oiseau1_rub"/></li>
     
            <li class="deroulant" style="width:78px"><a href="jourj.php"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" class="rollOver" /></a>
              <ul>
            	  <li><a href="prestataires.php">Les prestataires</a></li>
            	  <li><a href="deroulement.php">Le déroulement</a></li>
            	  <li><a href="voyage.php">Le voyage de noce</a></li>
            	  <li><a href="liste.php">La liste de mariage</a></li>
             </ul>
            </li>
    
        	  <li><img src="image/oiseau2_rub.jpg" alt="image/oiseau2_rub.jpg"></li>
     
     
            <li class="deroulant" style="width:160px"><a href="infospratiques.php"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" class="rollOver" /></a>
                <ul>
              	  <li><a href="commentvenir.php">Comment venir</a></li>
              	  <li><a href="hebergement.php">Hébergement</a></li>
        	  
               </ul>
            </li>
        	  <li><img src="image/oiseau3_rub.jpg"alt="image/oiseau3_rub.jpg"/></li>
 
          <li class="deroulant" style="width:89px"><a href="contact.php"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" class="rollOver" /></a>
            
          </li>
    	  <li><img src="image/oiseau4_rub.jpg"alt="image/oiseau4_rub.jpg"></li>
     
    </div>

la page avec le script

window.onload = function() {
    var menu = document.getElementById("menuHorizon");
    var sfEls = menu.getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        if (sfEls[i].className == "deroulant") {
            sfEls[i].onmouseover = function() {
                var uls = this.getElementsByTagName("ul");
                if (uls.length > 0) {
                    uls[0].style.display = "block";
                }
                var imgs = this.getElementsByTagName("img");
                if (imgs.length > 0) {
                    var img = imgs[0];
                    var tmp = img.src; img.src = img.alt; img.alt = tmp;
                }
            };
            sfEls[i].onmouseout = function() {
                var uls = this.getElementsByTagName("ul");
                if (uls.length > 0) {
                    uls[0].style.display = "none";
                }
                var imgs = this.getElementsByTagName("img");
                if (imgs.length > 0) {
                    var img = imgs[0];
                    var tmp = img.src; img.src = img.alt; img.alt = tmp;
                }
            };
        }
    }
};

Réponse 4 / 5
math 2000 Messages postés 2589 Date d'inscription Statut Membre Dernière intervention 405

tu as proférais prendre du js pour un menu déroulant ?
0
1. gaya_102
  
  en fait en meme temps que tu postais ta réponse sur les tableaux, un ami m'a trouvé l'erreur de mon script et du coup ca marche. Étant donné que ca fais 3 semaines que je n'arrivai pas trouver mon erreur maintenant que ca marche je t'avoue que je ne préfère plus y toucher
  
  0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 5
mpmp93 Messages postés 2931 Date d'inscription Statut Membre Dernière intervention 1 343

Bonjour,

Une solution: détecter le navigateur IE6 et afficher un message invitant le visiteur à utiliser autre chose que cette poubelle de IE6.

A+
0

Mon menu deroulant ne fonctionne pas avec IE6

5 réponses

Discussions similaires

Newsletters