mon menu ne marche pas avec IE6

**gaya102** · 20/04/2009, 12h19

voila j'ai mon menu qui ne marche pas avec IE6

voila ma page html.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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>

La page de mon menu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<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>
 
 
   </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>

et voila la page avec mon code javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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?

**emmanuel.remy** · 20/04/2009, 13h43

Que constates tu exactement ? Il ne s'affiche pas du tout ou autre chose ?

ERE

**gaya102** · 20/04/2009, 13h47

mes boutons s'affichent mais les sous menu non

**emmanuel.remy** · 20/04/2009, 14h23

Envoyé par gaya102

mes boutons s'affichent mais les sous menu non

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
//function gebcn(class) à remplacer par:
function gebcn(c) {
...
}

ERE

**gaya102** · 20/04/2009, 14h33

ca marche mais j'ai une erreur sur la page
This GetElementByTagName(...)0.style'a la valeur null ou n'est pas un objet

**emmanuel.remy** · 20/04/2009, 15h28

Envoyé par gaya102

ca marche mais j'ai une erreur sur la page
This GetElementByTagName(...)0.style'a la valeur null ou n'est pas un objet

C'est parce que ton code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

n'a pas de balise UL enfant de la balise LI.

ERE

**emmanuel.remy** · 20/04/2009, 19h59

Le code de ton menu s'appuie sur ce type d'arborescence:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
      <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>
...

A toi de la reproduire !

ERE

**gaya102** · 20/04/2009, 20h29

je pense avoir compris. Est ce que ca va comme ca?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<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>
 <ul>
      <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>
        </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>

**gaya102** · 20/04/2009, 20h36

par contre en vous mettant le code. je me rend compte qu'après cette ligne c'est tout rouge

<li><a href="enfantshonneurs.php">Les enfants d'honneurs</a></li>

est ce que c'est le ' qui ferait planté?

**gaya102** · 20/04/2009, 20h46

bon j'ai testé en mettant un \ delant le ' mais ca ne change rien

Par contre j'avais mis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 <ul>
      <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>
        </ul>

mais le problème c'est que du coup mon bouton ne s'affiche plus. Pourquoi?

**emmanuel.remy** · 20/04/2009, 22h01

Fonctionnel:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    <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>
            <ul>
            <!-- IL MANQUE DES DONNEES ICI , des balises LI qui constituent ce menu -->  
            </ul>
          </li>
    	  <li><img src="image/oiseau4_rub.jpg"alt="image/oiseau4_rub.jpg"></li>
 
    </div>

ERE

**gaya102** · 21/04/2009, 11h44

voila la page en question

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

voila le code que j'ai modifié

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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>

**emmanuel.remy** · 21/04/2009, 11h58

Original comme présentation de site !

Bon courage pour la suite,

ERE

**gaya102** · 21/04/2009, 11h58

mais ca marche pas encore le menu ne marche pas sous IE6

**emmanuel.remy** · 21/04/2009, 12h05

Envoyé par gaya102

mais ca marche pas encore le menu ne marche pas sous IE6

Enlève ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
	   <script type="text/javascript">
window.attachEvent("onload", function() {
Galery('toffe');
});		</script>

temporairement et réessaie.

ERE

**gaya102** · 21/04/2009, 12h07

non toujours pas

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

**emmanuel.remy** · 21/04/2009, 12h33

Envoyé par gaya102

non toujours pas

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

Là ce n'est plus un problème de Javascript c'est un problème de comptaibilité avec le navigateur. Soit c'est lié à la CSS c'est peut-être au DOCTYPE utilisé. Tu peux essayer de remplace ta première ligne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Par celle-ci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ou celle-ci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ERE

**emmanuel.remy** · 21/04/2009, 12h39

Fais plutôt une demande dans le forum CSS parce que là je n'ai plus d'idée !

Bon courage,

ERE

**gaya102** · 21/04/2009, 12h41

merci de ton aide en tout cas

**BaBeuH** · 21/04/2009, 12h45

Bonjour,

Quand je regarde le source de la page essaie.php, il n'y a pas de lien vers un .js externe ou de <SCRIPT>...</SCRIPT> particulier, du coup, il n'y a pas d'initialisation de ton menu...

J'imagine que tu as oublié d'intégrer le javascript d'initialisation du menu parmi tes tests ?

Sinon, par rapport à l'initialisation du script, je changerai

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.onload = function(){ ... }

par une fonction du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function addEvent(obj,event,fct)
{
	if (obj.attachEvent)
		obj.attachEvent('on' + event,fct);
	else obj.addEventListener(event,fct,true);
}
 
function removeEvent(obj,event,fct)
{
	if (obj.detachEvent)
		obj.detachEvent('on'+event,fct);
	else obj.removeEventListener(event,fct,true);
}
 
addEvent(document,load,initMenu);
 
function initMenu()
{
...
}

A+

mon menu ne marche pas avec IE6

JavaScript

Vue hybride

Discussions similaires

Partager

Partager