erreur de script dans ma page

Version imprimable

bonjour voila sous IE6 j'ai des erreurs de script

Code:

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
 
 
        <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() {
            this.getElementsByTagName("ul")[0].style.display = "block";
 
 
        }
        sfEls[i].onmouseout = function() {
            this.getElementsByTagName("ul")[0].style.display = "none";
 
 
        }
 
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>   
 
 
 
<div id="second">
<a href="index.html"><img id="logo" src="image/emeline_rub.jpg" alt="image/emeline_rub" /></a>
<ul id="menuHorizon">
      <li 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 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 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 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>

il me dit que

Ligne 28
car 13

this.getElementsByTagName(...).0 style à la valeur Null ou n'est pas un objet

du coup j'ai fait comme modif

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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() {
this.parentNode.style.display = "block"; 
} 
        }
     	sfEls[i].onmouseout = function() {
this.parentNode.style.display = "none"		
 
        }
 
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>

mais du coup menu déroulant ne marche plus.
ESt ce que quelqu'un pourrai m'aider car je ne connais pas beaucoup le java script?

merci d'avance

14/04/2009, 09h32
SpaceFrog

il me semble, mais je ne suis pas sur au vu de la presentation de ton code que tu n'attend pas que tous les objets de la page soient instanciés ...
ta focntion est lancée comme ça brut au démarrage ou tu la lances dans le onload ?
14/04/2009, 09h35
gaya102

elle est lancé au démarage
14/04/2009, 09h39
SpaceFrog

mets tout ça dans une fonction init() par exemple
et lance la fonction inti sur le onload de la balise body ..

au moment ou ces lignes sont interprétée, les objets visés par getElementById() ne sont pas encore instanciés ...
14/04/2009, 09h42
gaya102

je suis désole étant donné que je debute meme si je comprend se que tu veux dire je ne vois pas trop comment faire pour lancer la fonction avec le onload

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
fcuntion init(){
   sfHover = function() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
 
 
			sfEls[i].onmouseover = function() {
this.parentNode.style.display = "block"; 
} 
        }
     	sfEls[i].onmouseout = function() {
this.parentNode.style.display = "none"		
 
        }
 
    }
}
}
if (window.attachEvent) window.attachEvent("onload", init);
   </script>

Salut
window.attachEvent n'est reconnue que par IE

Code:

1
2
3
if(window.addEventListener){window.addEventListener("onload",sfHover);}// Non IE
else{if(window.attachEvent; //IE
{window.attachEvent("onload", sfHover)}}

14/04/2009, 09h46
SpaceFrog
oui bon alors du coup :
Code:

1 2 <body onload=" sfHover()" >
14/04/2009, 09h53
gaya102

Désole ma question va peut etre paraitre idiote mais

il faut juste que je mette ca

<body onload=" sfHover()" >

comment il va savoir quelle fonction appélé?
14/04/2009, 09h56
andry.aime

sfHover() sera appelé quand la page est chargée.

ok mais alors qu'est ce que va devenir mon script?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <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() {
            this.getElementsByTagName("ul")[0].style.display = "block";
 
 
        }
        sfEls[i].onmouseout = function() {
            this.getElementsByTagName("ul")[0].style.display = "none";
 
 
        }
 
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>

je dois l'enlever entièrement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
   function sfHover() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    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";
        }
    }
}
   </script>
<body onload=" sfHover()" >

ok la je comprend

Mais en fait il y a un problème en fait ma page menu est une page ou il n'y pas de HTML ni de body etant donné que cette page est appelé par une autre.

Code:

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
<!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" />
 
 
	   </head>
 
   <body>
 
       <div id="rubrique">        
 
		   <?php
include("menu.php");
?> 
           <div id="texte"> 
		   <br><br>
		   <br>
<h2>Les enfants d'honneurs</h2>
 
		   <P>
		   <h4>Théophile </h4>
 
		   C’est le filleul d’Emeline. Emeline a était très fière qu’on lui propose d’être la marraine de Théophile. Elle essaye de tenir son rôle du mieux possible. Cela coulait de source que Théophile, en tant que plus vieux et seul garçon (9 ans déjà !), porte les alliances à l’Eglise… (photo 5741)</p>
 
		 <br><br> 
<div id="enfant">
<img src="image/theo1.jpg" alt="toffe" />
<img src="image/theo2.jpg" alt="toffe" />
<img src="image/theo3.jpg" alt="toffe" />
</div>
 
 
 
 
		   <h4>Marion </h4>
 
		   C’est la filleule de Julien. Il a été fou de joie d’apprendre qu’on lui demandait d’être le parrain de la petite Marion qui aujourd’hui a bien grandi car elle a 7 ans ! Quand les futurs mariés lui ont demandé de porter les alliances à l’Eglise elle a répond « C’est pas moi qui me marie donc c’est pas moi qui mettrait l’alliance à mon doigt ! » . Ah la langue française et ses synonymes… Elle est aujourd’hui très fière d’« apporter » au prêtre pendant la messe !
 
 
		   <h4>Emy</h4>
 
		   Ce sera la plus jeune du cortège car elle n’aura pas tout à fait 2 ans le jour du mariage. Les 2 plus grands prennent leur rôle à cœur et s’occuperont bien d’elle dans le cortège mais ils ne sevraient pas avoir trop de travail car elle se débrouille très bien toute seule ! En tant que seule nièce des mariés, il était évident qu’elle les accompagne pendant la cérémonie. 
 
 
		   Son petit frère Sacha sera malheureusement trop petit (seulement 6 mois), pour faire partie du cortège mais nous sommes sûrs qu’ils nous accompagnera des ses gazouillis au moins !
 
 
 
 
		   </div>
 
 
		   </div>
		   <script type="text/javascript">
    initMenu();
</script>
 
		   	<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 menu est généré par menu.php?
Tu dois mettre alors le script dans un fichier que tu l'inclus dans tous ce qui ont besoin.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function sfHover() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    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";
        }
    }
if(window.addEventListener){window.addEventListener("onload",sfHover);}// Non IE
else{if(window.attachEvent; //IE
{window.attachEvent("onload", sfHover)}}

14/04/2009, 10h48
gaya102

donc si je comprend bien je dois faire une page avec tout les scripts que j'appellerai dans toute les pages c'est bien ca
<script src="URL du module externe">
</script>

par contre je met ca dans le body ou le head
14/04/2009, 10h52
andry.aime

Dans le head.
14/04/2009, 11h10
gaya102

ok je vais tester

j'ai testé et j'ai toujours la meme erreur

page javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script type="text/javascript">
function sfHover() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    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";
        }
    }
if(window.addEventListener){window.addEventListener("onload",sfHover);}// Non IE
else{if(window.attachEvent; //IE
{window.attachEvent("onload", sfHover)}}
 
  </script>

page du menu

Code:

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
 
 
 
<div id="second">
<a href="index.html"><img id="logo" src="image/emeline_rub.jpg" alt="image/emeline_rub" /></a>
<ul id="menuHorizon">
      <li 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 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 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 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>

la page du site

Code:

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
<!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 src="javascript.js">
</script> 
 
	   </head>
 
   <body>
 
       <div id="rubrique">        
 
		   <?php
include("menu.php");
?> 
           <div id="texte"> 
		   <br><br>
		   <br>
<h2>Les enfants d'honneurs</h2>
 
		   <P>
		   <h4>Théophile </h4>
 
		   C’est le filleul d’Emeline. Emeline a était très fière qu’on lui propose d’être la marraine de Théophile. Elle essaye de tenir son rôle du mieux possible. Cela coulait de source que Théophile, en tant que plus vieux et seul garçon (9 ans déjà !), porte les alliances à l’Eglise… (photo 5741)</p>
 
		 <br><br> 
<div id="enfant">
<img src="image/theo1.jpg" alt="toffe" />
<img src="image/theo2.jpg" alt="toffe" />
<img src="image/theo3.jpg" alt="toffe" />
</div>
 
 
 
 
		   <h4>Marion </h4>
 
		   C’est la filleule de Julien. Il a été fou de joie d’apprendre qu’on lui demandait d’être le parrain de la petite Marion qui aujourd’hui a bien grandi car elle a 7 ans ! Quand les futurs mariés lui ont demandé de porter les alliances à l’Eglise elle a répond « C’est pas moi qui me marie donc c’est pas moi qui mettrait l’alliance à mon doigt ! » . Ah la langue française et ses synonymes… Elle est aujourd’hui très fière d’« apporter » au prêtre pendant la messe !
 
 
		   <h4>Emy</h4>
 
		   Ce sera la plus jeune du cortège car elle n’aura pas tout à fait 2 ans le jour du mariage. Les 2 plus grands prennent leur rôle à cœur et s’occuperont bien d’elle dans le cortège mais ils ne sevraient pas avoir trop de travail car elle se débrouille très bien toute seule ! En tant que seule nièce des mariés, il était évident qu’elle les accompagne pendant la cérémonie. 
 
 
		   Son petit frère Sacha sera malheureusement trop petit (seulement 6 mois), pour faire partie du cortège mais nous sommes sûrs qu’ils nous accompagnera des ses gazouillis au moins !
 
 
 
 
		   </div>
 
 
		   </div>
		   <script type="text/javascript">
    initMenu();
</script>
 
		   	<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>

du coup mon menu déroulant ne marche plus sous IE6

15/04/2009, 08h53
gaya102

Qu'est ce qu'il faudrait que je change?

Code:

1
2
<script type="text/javascript" language="javascript" src="javascript.js">
</script>

15/04/2009, 09h28
gaya102

D2solé mais le menu ne marche toujours pas

il me dit erreur objet attendu
15/04/2009, 09h44
andry.aime

Je pense que ça vient du

Citation:

this.getElementsByTagName("ul")[0].style.display = "block";

si certains "li" du menu non pas de "ul".
15/04/2009, 09h52
gaya102

en gros c'est mes images entre mes onglets qui posent problème?
15/04/2009, 10h13
SpaceFrog

this. ?
15/04/2009, 10h17
gaya102

et si je met des des classes au li que je veux

j'ai essayé ca mais ca marche toujours pas

Code:

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
 <script type="text/javascript">
   sfHover = function() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("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";
 
 
        }
 
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>   
 
 
 
<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>