Probleme avec IE
gaya_102
-
NookZ Messages postés 2376 Statut Membre -
NookZ Messages postés 2376 Statut Membre -
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?
Merci par avance de votre aide
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
6 réponses
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.
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.
gaya_102
Comment je peux faire pour remédier a se probleme
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.
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];
<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];
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>
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!
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!
je ne vois pas de [1]
j'ai que des [0]
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 ?
Posez votre question
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
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
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>