Probleme avec IE

gaya_102 -

Bonjour,
Ma page fonctionne très ben sous firefox et bien entendu sous IE6 ca plante.

http://www.sandrineetgwen.fr/emelinejourj.php

J'ai de décalages, les sous menu que s'affichent tout le temps...

Comment cela se fait il?


       <script type="text/javascript">
   sfHover = function() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover = function() {

           var titre = this.getElementsByTagName("a")[0];
            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

            this.getElementsByTagName("ul")[0].style.display = "block";
        }
        sfEls[i].onmouseout = function() {

            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

           var titre = this.getElementsByTagName("a")[0];
            this.getElementsByTagName("ul")[0].style.display = "none";
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>    


  
<div id="second">
<img id="logo" src="image/emeline_rub.jpg" alt="image/emeline_rub" />
<ul id="menuHorizon">
      <li><a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="lesmaries.php">Les futurs mariés</a></li>
	  <li><a href="lesparents.php">Les parents des mariés</a></li>
	  <li><a href="lesfrangins.php">Les frangin(e)s</a></li>
	  <li><a href="lestemoins.php">Les témoins</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau1_rub.jpg" alt="image/oiseau1_rub"/></li>

      <li><a href="emelinejourj.html"><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><a href="emelineinfospratiques.html"><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><a href="emelinecontact.html"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="#">Bob Marley</a></li>
	  <li><a href="#">Israel Vibration</a></li>
	  <li><a href="#">Tiken Jah Fakoly</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau4_rub.jpg"alt="image/oiseau4_rub.jpg"></li>


   </ul>
</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>

/**********************************************************
				STYLES GENERAUX
**********************************************************/
 
img { 
	border: 0; 
	display: block; 
}
 
#logo { 
	float: left;
}
 
 
/***********************************************************
					MENU HORIZONTAL
**********************************************************/
 
#menuHorizon {
	margin-left: 90px;
	padding: 0;
	margin: 0;

}
 
#menuHorizon li {
	position: relative;
	float: left; /* mes les boutons sur la gauche*/
	list-style: none;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
}
 
 
#menuHorizon li a { /* sous menu of*/
	display: block;
	line-height: 25px;/* hauteur de chaques boutons des sous menus*/
	text-decoration: none;
	color: green;/* couleur de la police*/
}
 
#menuHorizon li a:hover{ /* sous menu on*/
	background-color: black;/* couleur du fond du sous menu en on*/
	color: pink; /* couleur de la police sous menu en on*/
} 
 
#menuHorizon li ul {
	position: absolute;
	display: none;
	left: 0; /* deplace les sous menu vers la droite*/
	padding: 0;/* marge a l'interieur des sous menus vers les bord*/
	margin: 0;
	border: 1px solid #000;
	background: #fff; /* indiqueras une couleur de fond blanche */

}
 
#menuHorizon li:hover > ul {
	display: block;
}
 
#menuHorizon li ul li {
	float: none;
	width: 150px;/* largeur des sous menu*/
	border:1px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}
 
#menuHorizon li ul li a {
	padding: 0 5px; /* hauteur et largeur de l'ensemble de sous menu*/
	border:1px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}

Merci par avance de votre aide

Configuration: Windows XP
Firefox 3.0.7

Afficher la suite

A voir également

Probleme avec IE
Ie tab - Télécharger - Outils pour navigateurs
Ie 8 - Télécharger - Navigateurs
Ie tester - Télécharger - Divers Web & Internet
Ie privacy keeper - Télécharger - Nettoyage
Ie 9 - Télécharger - Navigateurs

6 réponses

Réponse 1 / 6
NookZ
j'ai fait un petit test il ne comprend pas les src.

Pour pouvoir tester facilement sous IE. Allez dans Outils>Options internet>Onglet Avancés et décocher les deux cases de désactivation du debugger (juste en dessous de "Navigation").
Vous aurez ainsi un aperçu des erreurs soulevées par IE.

0

Réagir
1. gaya_102
  
  Comment je peux faire pour remédier a se probleme
  
  0
  
  Réagir
Réponse 2 / 6
NookZ
La var titre contient un élément de type lien (<a href"..." > </a>) cependant cet élément n'a pas d'attribut src, c'est donc normal que cela ne fonctionne pas.

0

Réagir
1. gaya_102
  
  Je pense comprendre se que tu veux dire mais par contre je ne vois pas commet y remedier
  
  0
  
  Réagir

NookZ

Si c'est bien cette image que vous vouliez utiliser
<li><a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>

ceci devrait fonctionner :
var titre = this.getElementsByTagName("a")[0];
à remplacer par
var titre = this.getElementsByTagName("img")[1];

gaya_102

J'ai fait la modif mais ca n'a pas marché


       <script type="text/javascript">
   sfHover = function() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover = function() {

           var titre = this.getElementsByTagName("a")[0];
            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

            this.getElementsByTagName("ul")[0].style.display = "block";
        }
        sfEls[i].onmouseout = function() {

            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

           var titre = this.getElementsByTagName("img")[0];
            this.getElementsByTagName("ul")[0].style.display = "none";
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>    


  
<div id="second">
<img id="logo" src="image/emeline_rub.jpg" alt="image/emeline_rub" />
<ul id="menuHorizon">
      <li style="width:156px"><a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="lesmaries.php">Les futurs mariés</a></li>
	  <li><a href="lesparents.php">Les parents des mariés</a></li>
	  <li><a href="lesfrangins.php">Les frangin(e)s</a></li>
	  <li><a href="lestemoins.php">Les témoins</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau1_rub.jpg" alt="image/oiseau1_rub"/></li>

      <li style="width:78px"><a href="emelinejourj.html"><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 style="width:160px"><a href="emelineinfospratiques.html"><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 style="width:89px"><a href="emelinecontact.html"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="#">Bob Marley</a></li>
	  <li><a href="#">Israel Vibration</a></li>
	  <li><a href="#">Tiken Jah Fakoly</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau4_rub.jpg"alt="image/oiseau4_rub.jpg"></li>


   </ul>
</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>

NookZ

Ah j'avais pas vu que t'avais deux fois la même ligne, c'est la ligne :
var titre = this.getElementsByTagName("a")[0];
var a = titre.src; titre.src = titre.alt; titre.alt = a;

que tu dois modifier et avec le [1] entre crochet!

gaya_102

je ne vois pas de [1]
j'ai que des [0]


       <script type="text/javascript">
   sfHover = function() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover = function() {

           var titre = this.getElementsByTagName("a")[0];
            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

            this.getElementsByTagName("ul")[0].style.display = "block";
        }
        sfEls[i].onmouseout = function() {

            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

           var titre = this.getElementsByTagName("a")[0];
            this.getElementsByTagName("ul")[0].style.display = "none";
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>    


  
<div id="second">
<img id="logo" src="image/emeline_rub.jpg" alt="image/emeline_rub" />
<ul id="menuHorizon">
      <li style="width:156px"><a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="lesmaries.php">Les futurs mariés</a></li>
	  <li><a href="lesparents.php">Les parents des mariés</a></li>
	  <li><a href="lesfrangins.php">Les frangin(e)s</a></li>
	  <li><a href="lestemoins.php">Les témoins</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau1_rub.jpg" alt="image/oiseau1_rub"/></li>

      <li style="width:78px"><a href="emelinejourj.html"><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 style="width:160px"><a href="emelineinfospratiques.html"><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 style="width:89px"><a href="emelinecontact.html"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="#">Bob Marley</a></li>
	  <li><a href="#">Israel Vibration</a></li>
	  <li><a href="#">Tiken Jah Fakoly</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau4_rub.jpg"alt="image/oiseau4_rub.jpg"></li>


   </ul>
</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>

Vous n’avez pas trouvé la réponse que vous recherchez ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question
Réponse 5 / 6
NookZ
var titre = this.getElementsByTagName("a")[0];
var a = titre.src; titre.src = titre.alt; titre.alt = a;

remplacé par

var titre = this.getElementsByTagName("img")[1];
var a = titre.src; titre.src = titre.alt; titre.alt = a;

je parle du [1] deux lignes au-dessus que la première fois tu n'avais pas pris en compte

0

Réagir

gaya_102

du coup le menu ne marche plus

 <script type="text/javascript">
   sfHover = function() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover = function() {

           var titre = this.getElementsByTagName("img")[1];
            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

            this.getElementsByTagName("ul")[0].style.display = "block";
        }
        sfEls[i].onmouseout = function() {

            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

           var titre = this.getElementsByTagName("a")[0];
            this.getElementsByTagName("ul")[0].style.display = "none";
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>

NookZ
et il y a une erreur indiquée par le debugger?

0

Réagir

Probleme avec IE

6 réponses

Discussions similaires

Newsletters