[DOM] Erreur JS (valeur null ou n'est pas un objet)

Version imprimable

Bonjour,
Je n'y connais rien en JS, j'ai trouvé ce code qui permet de faire des fondus d'images mais je rencontre une erreur sur uniquement sous IE, tout fonctionne sous FF.
Erreur : VisuelTab[...].1 a la valeur null ou n'est pas un objet

Code:

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
var visuel_n=0;
function Visuel_Fondu()
{
        if(document.all)
        {
                if ( window.opera )
                        document.getElementById("visuel_" + VisuelPosChange).style.opacity = visuel_n*0.01;
                else
                        document.getElementById("visuel_" + VisuelPosChange).filters.alpha.opacity=visuel_n;
                visuel_n+=5;
                if ( visuel_n<= 100 )
                {
                        setTimeout("Visuel_Fondu()", 100);
                        return 0;
                }
        }
        else
        {
                document.getElementById("visuel_" + VisuelPosChange).style.setProperty("-moz-opacity", visuel_n, "");
                visuel_n+=0.05;
                if ( visuel_n<= 1 )
                {
                        setTimeout("Visuel_Fondu()", 100);
                        return 0;
                }
        }
        visuel_n=0;
        setTimeout("Visuel_Clear()", 100); //supprime clignotement sous FF
}
 
function Visuel_Clear()
{
        //document.getElementById("visuel").innerHTML="";
        setTimeout("Visuel_Defil()", 4000);
}
 
var VisuelTab = [
        ["images/1.jpg",0],
        ["images/2.jpg",0],
        ["images/3.jpg",0],
        ["images/4.jpg",0],
        ["images/5.jpg",0],
        ["images/6.jpg",0],
        ["images/7.jpg",0],
];
var VisuelPos=-1;
var VisuelPosChange;
 
function Visuel_Defil()
{
        VisuelPosChange=VisuelPos;
        VisuelPos++;
        if ( VisuelTab.length <= VisuelPos )
                VisuelPos=0;
 
        if ( VisuelTab[VisuelPosChange][1] == 1 )
                document.getElementById("visuel").innerHTML="<img src='" + VisuelTab[VisuelPosChange][0] + "' id='visuel_" + VisuelPosChange + "' style='filter:alpha(opacity=0); -moz-opacity:0; position absolute; margin-top:0px; margin-left:0px;' />";
        else
        {
                setTimeout("Visuel_Defil()", 10);
                return 0;
        }
        Visuel_Fondu();
}
var LoadVisuelPos=0;
LoadVisuel();
function LoadVisuel() {
        var VisuelUrl;
        if ( VisuelTab[LoadVisuelPos][1] == 0 )
                VisuelUrl=VisuelTab[LoadVisuelPos][0];
        else if ( VisuelTab[VisuelTab.length-1][1] < 1 )
        {
                LoadVisuelPos++;
                if ( VisuelTab.length <= LoadVisuelPos )
                        LoadVisuelPos=0;
                setTimeout("LoadVisuel()", 10);
                return 0;
        }
        else
                return 0;
 
        if (window.XMLHttpRequest)
                req = new XMLHttpRequest();
        else if (window.ActiveXObject)
                req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
                req.onreadystatechange = function() { JsIsLoading(LoadVisuelPos); };
                req.open("GET", VisuelUrl, true);
                req.send(null);
        }
}
function JsIsLoading(LoadVisuelPos_) {
        if (req.readyState == 4) {
                if (req.status == 200 || req.status == 304)
                {
                        VisuelTab[LoadVisuelPos_][1]++;
                        if ( VisuelPos==-1 )
                        {
                                VisuelPos=0;
                                Visuel_Defil();
                        }
                }
                LoadVisuelPos++;
                if ( VisuelTab.length <= LoadVisuelPos )
                        LoadVisuelPos=0;
                setTimeout("LoadVisuel()", 10);
        }
}

Pourriez-vous m'aider svp ?
MErci.

Salut :)
Je te renverrais plutôt sur ce code moins complexe et qui fonctionne sur quasiment tous les navigateurs :

merci a spacefrog

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
 
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Fading Pic</title>
</head>
 
<body>
<img id="spaffySpecial" src="lungs.gif" width=116 height=123 style="-moz-opacity:0;filter:alpha(opacity=0)">
<br/>
Opacité : <input type='text' id='result' style="width:40px;text-align:right;" />
<script>
var max = 100;
var min = 0;
var opacite=min;
up=true;
var IsIE=!!document.all;
var ThePic=document.getElementById("spaffySpecial");
 
function fadePic(){		
				if (opacite<max && up){opacite+=2;}
				if (opacite>min && !up){opacite-=2;}
				if (opacite>=max){up=false;}
				if (opacite<=min){up=true;}
 
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("spaffySpecial").style.opacity=opacite/100;
document.getElementById('result').value=opacite+"%"
}
setInterval(function(){fadePic();},100)
 
</script>
</body>
</html>

bon courage

08/02/2008, 23h01
jibeji

Merci le_chomeur mais je souhaite faire défiler plusieurs images de la sorte, pas une seule. ;)
09/02/2008, 00h04
le_chomeur

... le code est TRES simple a adapter , tu te créer un tableau d'image et a chaque fois que l'effet est finit pour une image tu passes a la suivante ... allez allez je suis sur que tu peux y arriver ;)
09/02/2008, 09h14
jibeji

Le_chomeur, merci pour tes encouragements mais je cherche à comprendre une erreur sur du code existant, pas à tout réécrire !
Quand ta voiture est en panne t'en achètes une autre ? ;)
09/02/2008, 11h21
le_chomeur

Salut :)
Je te donnais un code qui est fonctionnel d'une part et qui est moins lourd que ce que tu essaye de faire :

- pourquoi utiliser des XMLHttpRequest juste pour charger des images ?? tu aurais pu utiliser les méthodes dom.

- ensuite pour ton problème tu utilises un tableau de tableau donc tu dois appeler les valeurs :
VisuelTab[0][0] ou VisuelTab[0][1] par exemple et non pas : VisuelTab[0].1

Voila bon courage à toi ...
09/02/2008, 15h24
jibeji

Bon, je viens d'essayer ton code et je reconnais que le rendu est bien meilleur qu'avec le mien, je vais donc essayer de me transformer en développeur.
C'est pas gagné. :oops:
Apparemment ta version gère l'opacité sur une image déja chargée depuis un <img src> en HTML. Je ne comprends pas comment dire de remplacer l'image par une autre que j'aurai trouvée dans mon tableau. Tu vois ?
09/02/2008, 15h31
le_chomeur

tu dois passer par le dom exemple pour remplacer ton image :

Code:

document.getElementById('tonimage').src = "urlde l'image"

En l'occurrence l'url correspondra à une entrée de ton tableau :)

Bon courage , et n'oublie pas le résolu ;)
09/02/2008, 15h57
jibeji

Ok merci.

Citation:

Envoyé par le_chomeur

Bon courage , et n'oublie pas le résolu ;)

Euh, tu me laisses une semaine ou deux avant stp ? :)

J'essaie de laisser l'image pendant 10 sec avant la transition suivante mais je comprends pas ce qui cloche, peux-tu m'orienter stp ?

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
 
<script type="text/javascript">
var opacite=0;
up=true;
var IsIE=!!document.all;
var ThePic=document.getElementById("Fondu");
var Position=0;
 
var ImgTab = [
   "images/1.jpg",
   "images/2.jpg",
   "images/3.jpg",
   "images/4.jpg",
   "images/5.jpg",
   "images/6.jpg",
   "images/7.jpg",
];
 
function viewPic(){
   setInterval(function(){fadePic();},30)
}
 
function fadePic(){
   document.getElementById("Fondu").src=ImgTab[Position];
   if (opacite<100 && up){opacite+=2;}
   if (opacite>0 && !up){opacite-=2;}
   if (opacite>=100){
      up=false;
              setInterval(function(){document.getElementById("Fondu").src=ImgTab[Position];},10000)
 
   }
   if (opacite<=0){
      up=true;
   if ( Position >= ImgTab.length ) {Position=1;}
   Position++;
   }
   IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("Fondu").style.opacity=opacite/100;
}
</script>

En fait je réaffiche l'image parce que je sais pas comment lui dire : ne fais rien pendant 10 secondes.

Salut , c'est cette ligne la qui ne va pas :

Code:

1
2
 
 setInterval(function(){document.getElementById("Fondu").src=ImgTab[Position];},10000)

essaye plutôt comme ça , en rajoutant une variable sur ton timer et en changeant l'image au bon moment ;)

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
 
<body>
<img src="" id="Fondu"/>
<script type="text/javascript">
var opacite=0;
up=true;
var IsIE=!!document.all;
var ThePic=document.getElementById("Fondu");
var Position=0;
 
var ImgTab = [
   "images/1.jpg",
   "images/2.jpg",
   "images/3.jpg",
   "images/4.jpg",
   "images/5.jpg",
   "images/6.jpg",
   "images/7.jpg",
];
var timer = null;
function viewPic(){
   timer = setInterval(function(){fadePic();},30)
}
 
function fadePic(){
   document.getElementById("Fondu").src=ImgTab[Position];
   if (opacite<100 && up){opacite+=2;}
   if (opacite>0 && !up){opacite-=2;}
   if (opacite>=100){
      up=false;
	  clearInterval(timer);
	     if ( Position >= ImgTab.length ) {Position=1;}
   		Position++;
	  document.getElementById("Fondu").src=ImgTab[Position];
		viewPic();
   }
   if (opacite<=0){
      up=true;
   }
   IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("Fondu").style.opacity=opacite/100;
}
viewPic();
</script>
 
</body>
</html>

voila voila

Merci.
Je viens d'essayer mais il y a un problème de fuite mémoire dans ton exemple, en moins de 15 minutes le navigateur passe de 40 à 250 Mo !!!

Dans un autre registre, je ne comprends vraiment pas setinterval.
En essayant ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function viewPic(){ ThePic.src=ImgTab[Position]; setInterval("fadePic()",30) setInterval("unfadePic()",30) } function fadePic(){ if (opacite<100 && up){opacite+=2;} if (opacite>=100){ up=false; } IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("Fondu").style.opacity=opacite/100; } function unfadePic(){ if (opacite>0 && !up){opacite-=2;} if (opacite<=0){ up=true; } IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("Fondu").style.opacity=opacite/100; }
Ca boucle. Alors que d'après ce que j'ai compris de la doc, on devrait :
- Afficher l'image
- La rendre opaque
- La "désopacifier"
- La "réopacifier"
et s'arrêter non ?
Ici ça boucle indéfiniment.

Alors explication sur setInterval :)

lorsque tu fais :
Code:

1 2 3 4 5 6 function viewPic(){ ThePic.src=ImgTab[Position]; setInterval("fadePic()",30) setInterval("unfadePic()",30) }
tu change la sources de ton image , puis tu lances 2 fonctions ( setinterval ) qui vont lancées à interval régulier une autre fonction.
Pour arrêter ces compteurs, tu dois auparavant les assigners a des variables ( ici en l'occurrence, globale :
Code:

1 2 3 4 5 6 7 var timer1 = null; var timer2 = null; function viewPic(){ ThePic.src=ImgTab[Position]; timer1 = setInterval("fadePic()",30); }
ce qui te permettra par la suite de les arrêter en utilisant la méthode :
clearInterval("le nom du timer") 1 ou 2 ...

donc sur ta fonction qui vérifit l'opacité , si tu arrives a 100 :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function fadePic(){ if (opacite<100 && up){opacite+=2;} if (opacite>=100){ up=false; //On arrète le premier timer : clearInterval(timer1); //Et a ce moment on peut lancer l'autre timer2 =setInterval("unfadePic()",30) } IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("Fondu").style.opacity=opacite/100; } //et donc l'inverse dans la 2eme fonction function unfadePic(){ if (opacite>0 && !up){opacite-=2;} if (opacite<=0){ up=true; timer1 =setInterval("fadePic()",30); } IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("Fondu").style.opacity=opacite/100; }
voila j'espère avoir été assez clair dans les explications sur les timers :)

10/02/2008, 15h42
jibeji

Excellent !
Tu avais juste oublié un clearinterval dans unfade qui faisait un setinterval dans un setinterval dans un setinterval etc...
J'ai fini par faire ce que je voulais.
Merci 1000 fois pour ton aide, c'est super sympa d'avoir passé tant de temps sur mon problème.