Discussion :

[jibeji]

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 :

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

[le_chomeur]

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

merci a spacefrog

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

[jibeji]

Merci le_chomeur mais je souhaite faire défiler plusieurs images de la sorte, pas une seule.

[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

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

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

[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é.
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 ?

[le_chomeur]

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

Code :

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

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

[jibeji]

Ok merci.

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

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

[jibeji]

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 :

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

[le_chomeur]

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

Code :

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

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 :

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

[jibeji]

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 :

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

[le_chomeur]

Alors explication sur setInterval

lorsque tu fais :

Code :

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

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 :

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

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 :

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

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