document.images[i] has no properties, kesako ?

Version imprimable

Comment faire défiler des images 1 par 1 par lot ?

voila, j'ai 3 lots de 3 ou 4 images que j'aimerais faire défilés une par une

pour facilier ta comprehension 11.jpeg est la premiere du premier lot. 12.jpeg, la 2ème image du premier lot.

Code:

1
2
3
4
5
6
7
8
9
 
position de départ : 11.jpeg 21.jpeg 31.jpeg
2 secondes apres  : 12.jpeg 21.jpeg 31.jpeg
2 secondes apres  : 12.jpeg 22.jpeg 31.jpeg
2 secondes apres  : 12.jpeg 22.jpeg 32.jpeg
2 secondes apres  : 13.jpeg 22.jpeg 32.jpeg
2 secondes apres  : 13.jpeg 23.jpeg 32.jpeg
2 secondes apres  : 13.jpeg 23.jpeg 33.jpeg
.......

Bref, l'image de gauche défile puis apres c'est au tour de l'image du millieu, puis celle de droite et on recommence, l'image de gauche défille.

Dans du javascript, j'ai chargé mes images :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var image = new Array();
 
image[0] = new Array();
image[0][0] = new Image();  image[0][0].src= '11.jpeg'
image[0][1] = new Image();	image[0][1].src= '12.jpeg'
image[0][2] = new Image();	image[0][2].src= '13.jpeg'
image[0][3] = new Image();	image[0][3].src= '14.jpeg'
 
image[1] = new Array();
image[1][0] = new Image();  image[1][0].src= '21.jpeg'
image[1][1] = new Image();	image[1][1].src= '32.jpeg'
image[1][2] = new Image();	image[1][2].src= '33.jpeg'
 
image[2] = new Array();
image[2][0] = new Image();  image[2][0].src= '31.jpeg'
image[2][1] = new Image();	image[2][1].src= '32.jpeg'
image[2][2] = new Image();	image[2][2].src= '33.jpeg'

puis apres je créé un tableau compteur pour chaque lot. Je pense utilisé cette variable pour faire défilé les images de chaque lots. Chaque lot a besoin de son propre compteur car tous les lots n'ont pas le meme nombre d'image. Ici le premier lot a 4 images (image[0].length) alors 2ème et 3ème ont 3 images.

Code:

1
2
3
4
5
6
7
var nb_lots_images = 3 
var compteur_images = new Array();
 
for (var j = 0 ; j < nb_lots_images ; j++)
{
	compteur_images[j] = 0;
}

Et voici la fonction d'animation :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Animation()
 {
 
     if(i > nb_lots_images) i = 0;
 
     p1 = compteur_images[i];
 
     document.images[i].src = image[i][p1].src;
 
     compteur_images[i]++;
     if (compteur_images[i] > 2)
         compteur_images[i] = 0
 
 
 
     i = i + 1;
     window.setTimeout("Animation()",2000);    
 }
     window.setTimeout("Animation()",2000);

07/10/2005, 13h51
SpaceFrog

de 0 à nb_lots_images-1
07/10/2005, 14h00
SpaceFrog

heu perso je serais passé par un setInterval ...

et lorsque tu as un souci de [i] fais un alert(i) ... ça done une idée du problème ..
07/10/2005, 17h26
weed

SpaceFrog, merci pour ta reponse. J'ai trouvé une autre solution mais cela dit, j'aimerais savoir pourquoi j'ai cette erreur par curiosité :

Code:

image[i][p1] has no properties

j'ai oublié de le mettre dans mon code, que j'initialise ma variable p1 à 0.
je rappelle que dans un premier temps je mets un max de truc en dur pour isoler l'erreur .....
07/10/2005, 17h30
weed

Citation:

Envoyé par SpaceFrog

heu perso je serais passé par un setInterval ...

et lorsque tu as un souci de [i] fais un alert(i) ... ça done une idée du problème ..

oui j'aimerais bien mais avec les setTimeOut c'est une vrai plaie car ce n'est pas bloquant, ce qui fait que tu peux pas tellement observer l'evolutions des valeurs variables. Il faut se dépecher à cliquer sur OK sur les boites d'alertes et augmenter le setTimeOut
07/10/2005, 17h33
SpaceFrog

1) un alert(image[i][p1]) te retourne quoi ???

2) image est un mot reservé de javascript ... change le nom de la variable ...
essaye avec myimage ou tabimage ???

1./
alert(myimages[i][p1]); me renvoie [object HTMLImageElement]

2./ voila c'est fait, j'ai remplacé les image par myimages

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
<html>
<head></head>
 
 
<body>
<img name='image1' src='11.jpeg'>
<img src='21.jpeg'>
<img src='31.jpeg'>
 
<script type='text/javascript'>
 <!-- 
var myimages = new Array();
 
myimages[0] = new Array();
myimages[0][0] = new Image();  myimages[0][0].src= '11.jpeg'
myimages[0][1] = new Image();	myimages[0][1].src= '12.jpeg'
myimages[0][2] = new Image();	myimages[0][2].src= '13.jpeg'
myimages[0][3] = new Image();	myimages[0][3].src= '14.jpeg'
 
myimages[1] = new Array();
myimages[1][0] = new Image();  myimages[1][0].src= '21.jpeg'
myimages[1][1] = new Image();	myimages[1][1].src= '32.jpeg'
myimages[1][2] = new Image();	myimages[1][2].src= '33.jpeg'
 
myimages[2] = new Array();
myimages[2][0] = new Image();  myimages[2][0].src= '31.jpeg'
myimages[2][1] = new Image();	myimages[2][1].src= '32.jpeg'
myimages[2][2] = new Image();	myimages[2][2].src= '33.jpeg'
 
var nb_lots_images = 2; 
var compteur_images = new Array();
var p1 = 0;
var i = 0;
 
for (var j = 0 ; j < nb_lots_images ; j++)
{
	compteur_images[j] = 0;
}
 
 
function Animation()
{
 
	if(i > nb_lots_images) i = 0;
 
	p1 = compteur_images[i];
 
	alert(myimages[i][p1]);
 
	document.images[i].src = myimages[i][p1].src;
 
	compteur_images[i]++;
	if (compteur_images[i] > 2)
		compteur_images[i] = 0
 
 
 
	i = i + 1;
	window.setTimeout("Animation()",2000);	
}
	window.setTimeout("Animation()",2000);
 
 
 
 //-->
</script>
</body>
</html>