Rotation aléatoire de logo avec lien

**gregius** · 10/06/2008, 15h26

tant qu'elles n'ont pas toutes été affichées, on ne reprend pas d'images qui ont déjà été affichées

**SpaceFrog** · 10/06/2008, 15h31

faut secouer un peu la pulpe là ...

file au supermarché du coin il y a des promo sur les neurones et la matière grise ...
c'est pas très sorcier !!!

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
 
function DiapoRand(){
for(k=0;k<5;k++){
if(RunGal.length>0){
		Indice=Math.floor(Math.random()*RunGal.length);
		document.getElementById('result'+k).src=RunGal[Indice].src;
		RunGal.splice(Indice,1)
		}
setTimeout(DiapoRand,1000)
}
else{
clearTimeout(Launch);
RunGal=RunGal.concat(Gallerie)
DiapoRand();
}

avec

Code :

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

1
2
3
4
5
6
 
<img id='result0' scr='...' />
<img id='result1' scr='...' />
<img id='result2' scr='...' />
<img id='result3' scr='...' />
<img id='result4' scr='...' />

à condition que le length de l'array soit un multiple de 5 !!!

**gregius** · 10/06/2008, 16h35

Donc, ben euuuh, le rayon était vide

J'ai mis 10 images dans l'array (multiple de 5 aux dernières nouvelles)
Et ça marche plus... rien ne s'affiche...
Tentative de réflexion (surement foireuse)
Il ne faut pas définir le k au début de la fonction diaporand?

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
 
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>SlideShow</title>
 
<script type='text/javascript'>
var Gallerie=new Array();
Gallerie[0]=new Image();
Gallerie[0].src="forme_01.jpg";
Gallerie[1]=new Image();
Gallerie[1].src="forme_02.jpg";
Gallerie[2]=new Image();
Gallerie[2].src="forme_03.png";
Gallerie[3]=new Image();
Gallerie[3].src="Hemes.gif";
Gallerie[4]=new Image();
Gallerie[4].src="ER.gif";
Gallerie[5]=new Image();
Gallerie[5].src="jadot.png";
Gallerie[6]=new Image();
Gallerie[6].src="logo_CAN-E.jpg";
Gallerie[7]=new Image();
Gallerie[7].src="logo_UCL-TERM1.jpg";
Gallerie[8]=new Image();
Gallerie[8].src="passeurs_nrj.jpg";
Gallerie[9]=new Image();
Gallerie[9].src="promo_logo.png";
 
 
function DiapoRand(){
for(k=0;k<5;k++){
if(RunGal.length>0){
		Indice=Math.floor(Math.random()*RunGal.length);
		document.getElementById('result'+k).src=RunGal[Indice].src;
		RunGal.splice(Indice,1)
		}
setTimeout(DiapoRand,1000)
}
else{
clearTimeout(Launch);
RunGal=RunGal.concat(Gallerie)
DiapoRand();
}
</script>
 
</head>
 
 
<body onload="var Launch=setInterval(DiapoRand,1000)">
<img id='result0' scr='...' />
<img id='result1' scr='...' />
<img id='result2' scr='...' />
<img id='result3' scr='...' />
<img id='result4' scr='...' />
</body>
</html>

**SpaceFrog** · 10/06/2008, 17h04

:rolleyes: tu as oublié l'essentiel ...
le RunGal qui est l'array de "travail" ...

j'ai just eeu a inverser la boucle k avec celle des i ...

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
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>SlideShow</title>
 
<script type='text/javascript'>
var Gallerie=new Array();
Gallerie[0]=new Image();
Gallerie[0].src="forme_01.jpg";
Gallerie[1]=new Image();
Gallerie[1].src="forme_02.jpg";
Gallerie[2]=new Image();
Gallerie[2].src="forme_03.png";
Gallerie[3]=new Image();
Gallerie[3].src="Hemes.gif";
Gallerie[4]=new Image();
Gallerie[4].src="ER.gif";
Gallerie[5]=new Image();
Gallerie[5].src="jadot.png";
Gallerie[6]=new Image();
Gallerie[6].src="logo_CAN-E.jpg";
Gallerie[7]=new Image();
Gallerie[7].src="logo_UCL-TERM1.jpg";
Gallerie[8]=new Image();
Gallerie[8].src="passeurs_nrj.jpg";
Gallerie[9]=new Image();
Gallerie[9].src="promo_logo.png";
 
var Launch;
var RunGal=new Array();
RunGal=RunGal.concat(Gallerie);
 
function DiapoRand(){
if(RunGal.length>0){
	for(k=0;k<5;k++){
 
							Indice=Math.floor(Math.random()*RunGal.length);
							document.getElementById('result'+k).scr=RunGal[Indice].src;
							RunGal.splice(Indice,1)
							}
	Launch=setTimeout(DiapoRand,1000)
}
else{
clearTimeout(Launch);
RunGal=RunGal.concat(Gallerie)
DiapoRand();
}
}
</script>
 
</head>
<body onload="Launch=setTimeout(DiapoRand,1000)">
<img id='result0' />
<img id='result1' />
<img id='result2' />
<img id='result3' />
<img id='result4' />
</body>
</html>

MErci aussi d'utilser le balises CODE !!! boutn # de l'editeur et pas les balise QUOTE ....

**gregius** · 10/06/2008, 17h24

je m'en doutais, je l'ai testé aussi mais ça marche toujours paas

j'ai testé avec IE et là non plus... (j'suis avec FF)

**SpaceFrog** · 10/06/2008, 17h27

Tu as une erreur de copier coller ...

testé sous IE et FFX ...

une version sasn image en inscrivant les path dasn des divs :

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
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>SlideShow</title>
 
<script type='text/javascript'>
var Gallerie=new Array();
Gallerie[0]=new Image();
Gallerie[0].src="forme_01.jpg";
Gallerie[1]=new Image();
Gallerie[1].src="forme_02.jpg";
Gallerie[2]=new Image();
Gallerie[2].src="forme_03.png";
Gallerie[3]=new Image();
Gallerie[3].src="Hemes.gif";
Gallerie[4]=new Image();
Gallerie[4].src="ER.gif";
Gallerie[5]=new Image();
Gallerie[5].src="jadot.png";
Gallerie[6]=new Image();
Gallerie[6].src="logo_CAN-E.jpg";
Gallerie[7]=new Image();
Gallerie[7].src="logo_UCL-TERM1.jpg";
Gallerie[8]=new Image();
Gallerie[8].src="passeurs_nrj.jpg";
Gallerie[9]=new Image();
Gallerie[9].src="promo_logo.png";
 
var Launch;
var RunGal=new Array();
RunGal=RunGal.concat(Gallerie);
 
function DiapoRand(){
if(RunGal.length>0){
	for(k=0;k<5;k++){
 
							Indice=Math.floor(Math.random()*RunGal.length);
							document.getElementById('result'+k).innerHTML=RunGal[Indice].src;
							RunGal.splice(Indice,1)
							}
	Launch=setTimeout(DiapoRand,1000)
}
else{
clearTimeout(Launch);
RunGal=RunGal.concat(Gallerie)
DiapoRand();
}
}
</script>
 
</head>
<body onload="Launch=setTimeout(DiapoRand,1000)">
<div id='result0' ></div>
<div id='result1' ></div>
<div id='result2' ></div>
<div id='result3' ></div>
<div id='result4' ></div>
</body>
</html>

On voit bien les path se modifier ...

**gregius** · 11/06/2008, 10h20

Excellent, ça marche !!, il y avait juste une petite inversion scr au lieu de src...

Par contre, encore deux petits trucs :

je n'arrive pas à mettre un URL pour chaque image
il y a quand même répétition des logos avant que tous les autres ne soient passés...

Et serait-il possible d'éviter que le nombre d'image soit un multiple de 5?

**SpaceFrog** · 11/06/2008, 10h50

répétition ? heu a priori ce n'est pas possible ...
tu veux un lien par logo ?

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
 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>SlideShow</title>
 
<script type='text/javascript'>
var Gallerie=new Array();
Gallerie[0]=new Image();
Gallerie[0].src="forme_01.jpg";
Gallerir[0].lien="autrepage.htm"
Gallerie[1]=new Image();
Gallerie[1].src="forme_02.jpg";
Gallerir[1].lien="autrepage.htm"
Gallerie[2]=new Image();
Gallerie[2].src="forme_03.png";
Gallerir[2].lien="autrepage.htm"
Gallerie[3]=new Image();
Gallerie[3].src="Hemes.gif";
Gallerir[3].lien="autrepage.htm"
Gallerie[4]=new Image();
Gallerie[4].src="ER.gif";
Gallerir[4].lien="autrepage.htm"
Gallerie[5]=new Image();
Gallerie[5].src="jadot.png";
Gallerir[5].lien="autrepage.htm"
Gallerie[6]=new Image();
Gallerie[6].src="logo_CAN-E.jpg";
Gallerir[6].lien="autrepage.htm"
Gallerie[7]=new Image();
Gallerie[7].src="logo_UCL-TERM1.jpg";
Gallerir[7].lien="autrepage.htm"
Gallerie[8]=new Image();
Gallerie[8].src="passeurs_nrj.jpg";
Gallerir[8].lien="autrepage.htm"
Gallerie[9]=new Image();
Gallerie[9].src="promo_logo.png";
Gallerir[9].lien="autrepage.htm"
 
var Launch;
var RunGal=new Array();
RunGal=RunGal.concat(Gallerie);
 
function DiapoRand(){
if(RunGal.length>0){
	for(k=0;k<5;k++){							Indice=Math.floor(Math.random()*RunGal.length);
							document.getElementById('result'+k).src=RunGal[Indice].src;
docuemnt.getElementById('result'+k.lien=RunGal[Indice].lien;
							RunGal.splice(Indice,1)
							}
	Launch=setTimeout(DiapoRand,1000)
}
else{
clearTimeout(Launch);
RunGal=RunGal.concat(Gallerie)
DiapoRand();
}
}
</script>
 
</head>
<body onload="Launch=setTimeout(DiapoRand,1000)">
<img id='result0' lien='...' onclick='self.location.href=this.lien' />
<img id='result1' lien='...' onclick='self.location.href=this.lien'  />
<img id='result2' lien='...' onclick='self.location.href=this.lien'  />
<img id='result3' lien='...' onclick='self.location.href=this.lien'  />
<img id='result4' lien='...' onclick='self.location.href=this.lien' />
</body>
</html>

**gregius** · 11/06/2008, 11h42

ça fonctionne plus...
J'ai pourtant changé deux petites fautes de frappes :

Code :

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

1
2
3
 
document.getElementById('result'+k).src=RunGal[Indice].src;
document.getElementById('result'+k).lien=RunGal[Indice].lien;

Plus rien ne va... J'ai comparé les deux codes... à part les changements ci-dessus, je ne vois rien de suspect

**SpaceFrog** · 11/06/2008, 12h06

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
 
<script type='text/javascript'>
var Gallerie=new Array();
Gallerie[0]=new Image();
Gallerie[0].src="forme_01.jpg";
Gallerie[0].lien="autrepage1.htm"
Gallerie[1]=new Image();
Gallerie[1].src="forme_02.jpg";
Gallerie[1].lien="autrepage2.htm"
Gallerie[2]=new Image();
Gallerie[2].src="forme_03.png";
Gallerie[2].lien="autrepage3.htm"
Gallerie[3]=new Image();
Gallerie[3].src="Hemes.gif";
Gallerie[3].lien="autrepage4.htm"
Gallerie[4]=new Image();
Gallerie[4].src="ER.gif";
Gallerie[4].lien="autrepage5.htm"
Gallerie[5]=new Image();
Gallerie[5].src="jadot.png";
Gallerie[5].lien="autrepage6.htm"
Gallerie[6]=new Image();
Gallerie[6].src="logo_CAN-E.jpg";
Gallerie[6].lien="autrepage7.htm"
Gallerie[7]=new Image();
Gallerie[7].src="logo_UCL-TERM1.jpg";
Gallerie[7].lien="autrepage8.htm"
Gallerie[8]=new Image();
Gallerie[8].src="passeurs_nrj.jpg";
Gallerie[8].lien="autrepage9.htm"
Gallerie[9]=new Image();
Gallerie[9].src="promo_logo.png";
Gallerie[9].lien="autrepage10.htm"
 
var Launch;
var RunGal=new Array();
RunGal=RunGal.concat(Gallerie);
 
function DiapoRand(){
 
if(RunGal.length>0){ 
						for(k=0;k<5;k++){	Indice=Math.floor(Math.random()*RunGal.length);
											document.getElementById('result'+k).src=RunGal[Indice].src;
											document.getElementById('result'+k).lien=RunGal[Indice].lien;
											RunGal.splice(Indice,1)
											}
						Launch=setTimeout(DiapoRand,1000)
						}
else{
		clearTimeout(Launch);
		RunGal=RunGal.concat(Gallerie)
		DiapoRand();
	  }
}
</script>

**gregius** · 11/06/2008, 12h48

Excellent !

Tout fonctionne.

Je vais chipoter pour voir comment faire pour que ça fonctionne au cas où j'ai un nombre de logo qui n'est pas un multiple de 5...
Le truc rude, c'est que pour une partie des logos affichés, il devra les prendre dans ceux qui ont déjà été affichés...

Enfin, sinon, j'attends d'avoir un nombre suffisant pour les afficher..

Merci pour tout Spacefrog, ta science du javascript est vraiment impressionnante...

**SpaceFrog** · 11/06/2008, 13h12

hmmmm....
pour un non multiple de 5...
Un pansemant serait de faire ça ...

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
 
 
if(RunGal.length>0){ 
						for(k=0;k<5;k++){	Indice=Math.floor(Math.random()*RunGal.length);
											document.getElementById('result'+k).src=RunGal[Indice].src;
											document.getElementById('result'+k).lien=RunGal[Indice].lien;
											RunGal.splice(Indice,1);
if(RunGal.length==0){
clearTimeout(Launch);
		RunGal=RunGal.concat(Gallerie)
		DiapoRand();}
 
											}
						Launch=setTimeout(DiapoRand,1000)
						}

pas testé mais l'idée y est ...

[edit] sinon une solution plus élégante consisterait à faire un break dans la boucle for de k lorsque après le splice la longueur de l'array est egale à 0 ...
mais il faudrait garder en mémoire le dernier div renseigné ...

**gregius** · 11/06/2008, 14h22

Effectivement, ce serait plus élégant

Je vais de faire des stats sur 10 rotations pour 8 logos aux 5 places...
Certains apparaissent 9 fois, d'autres minimum 5 fois...
Donc ta solution de faire un break me semble idéale...
Où pourrais-je me renseigner pour trouver les fonction pour le break et la mise en mémoire?

**SpaceFrog** · 11/06/2008, 14h28

pour le break c'est pas compliqué, le principe :

Code :

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

1
2
3
4
5
6
7
8
function foo(){
 
for (i=0;i<100;i++){
if (i==50){break;}
}
alert(i)
}
foo()

le truc c'est que quand tu sors de la boucle tu n'est pas sur la dernière image ...
donc à la reprise il faut repartir de là ou tu t'es arrété ...
je vais regarder comment on peut faire .;; je pense virer la boucle k et avoir une variable globale de l'indice du div ...
laisse moi 5 minutes

**SpaceFrog** · 11/06/2008, 14h36

Bon pas testé mais ça devrait le faire comme 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
19
20
21
22
23
24
25
26
27
var Launch;
var IndexDiv=0
var RunGal=new Array();
RunGal=RunGal.concat(Gallerie);
 
function DiapoRand(){
 
if(RunGal.length>0){ 
						while(IndexDiv<5){	Indice=Math.floor(Math.random()*RunGal.length);
											    document.getElementById('result'+IndexDiv).src=RunGal[Indice].src;
											    document.getElementById('result'+IndexDiv).lien=RunGal[Indice].lien;
											    RunGal.splice(Indice,1)
											    IndexDiv++;
											    if(RunGal.length==0){break;}
											}
						IndexDiv=(IndexDiv==5)?0:IndexDiv;					
						Launch=setTimeout(DiapoRand,1000)
						}
else{
		clearTimeout(Launch);
		RunGal=RunGal.concat(Gallerie)
		DiapoRand();
	  }
}
 
 
</script>

Code perfectible car en fin d'array il peut y avoir des doublons à l'affichage
il doit falloir jouer du splice ou slice ...

**SpaceFrog** · 11/06/2008, 14h58

Bon j'ai une solution eventuellement ...

si le length de l'array est < à 5
on le concatène avec Gallerie ...
reste à faire un prototype sur l'array pour éliminer les doublons ...

**gregius** · 11/06/2008, 15h12

Envoyé par SpaceFrog

Bon j'ai une solution eventuellement ...

si le length de l'array est < à 5
on le concatène avec Gallerie ...
reste à faire un prototype sur l'array pour éliminer les doublons ...

Effectivement, j'ai des doublons... mais je vois que tu y travailles... trop foort

Au fait, sans vouloir être indiscret, tu faits cela juste pour ton plaisir et l'entretien de tes connaissance en javascript? ou t'est rémunéré par developpez.com pour le faire?

**SpaceFrog** · 11/06/2008, 15h14

QUoi que des fois ça vaut pas la peine de se compliquer l'existence

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 DiapoRand(){
 
if(RunGal.length>0){ 
						while(IndexDiv<5){	Indice=Math.floor(Math.random()*RunGal.length);
											    document.getElementById('result'+IndexDiv).src=RunGal[Indice].src;
											    document.getElementById('result'+IndexDiv).lien=RunGal[Indice].lien;
											    RunGal.splice(Indice,1)
											    IndexDiv++;
											    if(RunGal.length<5){
											    		RunGal=RunGal.concat(Gallerie);
											    		break;}
											}
						IndexDiv=(IndexDiv==5)?0:IndexDiv;					
						Launch=setTimeout(DiapoRand,1000)
						}
else{
		clearTimeout(Launch);
		RunGal=RunGal.concat(Gallerie)
		DiapoRand();
	  }
}