Rotation aléatoire de logo avec lien

**gregius** · 09/06/2008, 12h46

Hello,

Sur mon site, j'ai devrais placer une 20aine de logos alors que je n'ai que 5 places l'une en dessous de l'autre.
J'aimerais trouver un petit javascript (et j'ai déjà pas mal cherché) qui, toute les x secondes (5 par exemple) change tous les logos en même temps (et donc les liens aussi) mais surtout, cela doit se faire aléatoirement sans répétition tant que tous les autres logos n'ont pas été montrés...
J'aurais bien vu un script qui va chercher toutes les infos (dans une table sql de ma base de donnée)...

Au début, j'étais partis sur la balise marquee mais j'ai vu qu'elle était très décriée et en plus, pas vraiment ce que je veux...

Si quelqu'un à un script qui s'en rapproche, je suis preneur

Merci

**SpaceFrog** · 09/06/2008, 13h24

il doit y avoir dans les contributions ou dans la faq un tirage aléatoire sans répétition...

perso je le ferais à partir d'un array des paths des logos et un random sur les indices du tableau (Math.random()) et un pop sur l'array jusqu'à vider l'array ...

**gregius** · 09/06/2008, 14h03

Ben voui, comment n'y avais-je pas pensé plus tôt...

Evidemment, je ne vais pas vous demander de l'écrire mais étant un newbie dans la javascript, tu m'as un peu parlé chinois là

J'ai trouvé un exemple que je devrais adapter :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>SlideShow</title>
<script type="text/javascript">
<!--
function affichage(){
 
// On stock ici les images
var tabImgSave = new Array;
tabImgSave[0] = 'forme_01.jpg';
tabImgSave[1] = 'forme_02.jpg';
tabImgSave[2] = 'forme_03.png';
tabImgSave[3] = 'forme_04.gif';
tabImgSave[4] = 'forme_05.gif';
tabImgSave[5] = 'forme_06.gif';
tabImgSave[6] = 'forme_07.gif';
tabImgSave[7] = 'forme_08.gif';
 
var nb_img = tabImgSave.length;
 
//on en prend 1 au hasard
var tabImgAff ;
 
  var rand = Math.floor( Math.random()*(nb_img));
  tabImgAff = tabImgSave[rand];
 
// et on l'affiche
 
  toThis = "<img src=\"" + tabImgAff + "\" border=\"0\">";
 
  if (document.getElementById) {
    document.getElementById("textDiv").innerHTML = toThis;
	document.getElementById("textDiv1").innerHTML = toThis;
  }
  else if (document.all) {
    document.all["textDiv"].innerHTML = toThis;
	 document.all["textDiv1"].innerHTML = toThis;
  }
 
}
// -->
</script>
</head>
 
<body onload="javascript: setInterval('affichage()',1000);">
<table>
 
  <tr valign="middle">
    <td id="textDiv" align="center"></td>
	<td id="textDiv" align="center"></td>
  </tr>
   <tr valign="middle">
    <td id="textDiv1" align="center"></td>
	<td id="textDiv1" align="center"></td>
  </tr>
</table>
</body>
</html>

J'ai bidouillé pour avoir deux div (je devrais en avoir 5) mais
Problème 1: pas de possibilité de lien internet
Problème 2: affichage simultané des mêmes logos dans les deux div..

PS: j'adore ta signature... j'étais rotfl

**gregius** · 10/06/2008, 09h12

personne pour m'aider?

**SpaceFrog** · 10/06/2008, 09h33

heu innerHTML

pour des images ...... il faut attribuer les src ... !!!

c'est pourtant pas bien compliqué ...

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
 
 
<script type='text/javascript'>
var Gallerie=new Array();
Gallerie[0]=new Image();
Gallerie[0].src="chemin/image1.jpg";
Gallerie[1]=new Image();
Gallerie[1].src="chemin/image2.jpg";
Gallerie[2]=new Image();
Gallerie[2].src="chemin/image3.jpg";
//../..
 
function DiapoRand(){
if(Gallerie.length>0){
		Indice=Math.floor(Math.random()*Gallerie.length);
		document.getElementById('result').innerHTML=Gallerie[Indice].src;
		Gallerie.splice(Indice,1)
		}
		}
 
</script>
</head>
 
 
<body onload="var Launch=setInterval(DiapoRand,1000)" ;>
<img id="result" src=" ">

reste juste à savoir comment tu attribues le premier src

**tusssss** · 10/06/2008, 09h34

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>SlideShow</title>
<script type="text/javascript">
 <!--
function affichage(){
 
// On stock ici les images
var tabImgSave = new Array;
tabImgSave[0] = 'forme_01.jpg';
tabImgSave[1] = 'forme_02.jpg';
tabImgSave[2] = 'forme_03.png';
tabImgSave[3] = 'forme_04.gif';
tabImgSave[4] = 'forme_05.gif';
tabImgSave[5] = 'forme_06.gif';
tabImgSave[6] = 'forme_07.gif';
tabImgSave[7] = 'forme_08.gif';
 
var nb_img = tabImgSave.length;
 
//on en prend 1 au hasard
var tabImgAff ;
 
for (i=1;i<6;i++)
{
   var rand = Math.floor( Math.random()*(nb_img));
   tabImgAff = tabImgSave[rand];
 
   // et on l'affiche
 
   toThis+i = "<img src=\"" + tabImgAff + "\" border=\"0\">";
}
 
if (document.getElementById) {
document.getElementById("textDiv1").innerHTML = toThis1;
document.getElementById("textDiv2").innerHTML = toThis2;
document.getElementById("textDiv3").innerHTML = toThis3;
document.getElementById("textDiv4").innerHTML = toThis4;
document.getElementById("textDiv5").innerHTML = toThis5;
}
else if (document.all) {
document.all["textDiv1"].innerHTML = toThis1;
document.all["textDiv2"].innerHTML = toThis2;
document.all["textDiv3"].innerHTML = toThis3;
document.all["textDiv4"].innerHTML = toThis4;
document.all["textDiv5"].innerHTML = toThis5;
}
 
}
// -->
</script>
</head>
 
<body onload="javascript: setInterval('affichage()',1000);">
<table>
 
<tr valign="middle">
<td id="textDiv1" align="center"></td>
</tr>
<tr valign="middle">
<td id="textDiv2" align="center"></td>
</tr>
<tr valign="middle">
<td id="textDiv3" align="center"></td>
</tr>
<tr valign="middle">
<td id="textDiv4" align="center"></td>
</tr>
<tr valign="middle">
<td id="textDiv5" align="center"></td>
</tr>
</table>
</body>
</html>

Bon ca aurait été mieux codé avec des boucles, mais avec ça, tu dois pouvoir afficher 5 images aléatoires, reste à gérer la non répétabilité d'une image affichée.

Edit: completement grillé et je n'ai fait qu'adapter le code déjà fourni pour y mettre 5 images. Il faut donc preferer le code de SpaceFrog

**gregius** · 10/06/2008, 10h46

Spacefrog,

Merci pour ta réponse.
J'essaye de bidouiller mais je ne vois pas ce que c'est le premier src...
c'est dans le body que je dois le définir? Est-ce une adresse html? Elles sont quand même définie dans le javascript...

je sais je sais, j'suis nul

**SpaceFrog** · 10/06/2008, 10h58

Ben avec mon code au chargement de la page il n'y a pas de src défini dans la balise
ce n'est qu'au bout d'une seconde (timer) que le src est défini ...

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

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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="http://www.apere.org/dev/forme_01.jpg";
Gallerie[1]=new Image();
Gallerie[1].src="http://www.apere.org/dev/forme_02.jpg";
Gallerie[2]=new Image();
Gallerie[2].src="http://www.apere.org/dev/forme_03.png";
 
function DiapoRand(){
if(Gallerie.length>0){
		Indice=Math.floor(Math.random()*Gallerie.length);
		document.getElementById('result').innerHTML=Gallerie[Indice].src;
		Gallerie.splice(Indice,1)
		}
		}
 
</script>
 
</head>
 
 
<body onload="var Launch=setInterval(DiapoRand,1000)" ;>
<img id="result" src="forme_01.jpg">
<img id="result" src="">
</body>
</html>

En faisant ça, je n'arrive pas à avoir de slideshow... t'es sur que ça fonctionne?

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

Oui quand on ne fait pas l'erreur grossière d'avoir plusieurs id identiques sur la page ... :rolleyes:

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

j'pige vraiment rien...

ici, j'ai mis plusieurs fois l'id result car j'ai besoin d'avoir 5 espaces dans lesquels les logos changent...

Et même en ne mettant qu'un id dans le body, ça ne change rien... toujours pas de slide
De plus je n'ai pas de lien actif... où dois-je indiquer l'url du logo?

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

un id doit être unique sur la page !!!!
il est interdit d'avoir plusieurs fois le même id !!!

**gregius** · 10/06/2008, 12h01

Voilà), j'en ai mis qu'un... ça ne change rien

J'ai toujours pas de slide...
Et pour l'url?

Désolé d'être un newbie mais j'essaie de capter l'bazar... pooo évident

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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="http://www.apere.org/dev/forme_01.jpg";
Gallerie[1]=new Image();
Gallerie[1].src="http://www.apere.org/dev/forme_02.jpg";
Gallerie[2]=new Image();
Gallerie[2].src="http://www.apere.org/dev/forme_03.png";

function DiapoRand(){
if(Gallerie.length>0){
Indice=Math.floor(Math.random()*Gallerie.length);
document.getElementById('result').innerHTML=Gallerie[Indice].src;
Gallerie.splice(Indice,1)
}
}

</script>

</head>

<body onload="var Launch=setInterval(DiapoRand,1000)" ;>
<img id="result" src="forme_01.jpg">
</body>
</html>

**SpaceFrog** · 10/06/2008, 12h16

Code :

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

document.getElementById('result').src=Gallerie[Indice].src;

desolé n'ayant pas une gallerie d'images sous la main j'avais testé avec du innerHTML et oublié de le modifier avant de te repasser le code ..

mais bon c'est gros comme une maison tu aurais pu le voir ...

**gregius** · 10/06/2008, 12h33

ok ça prend forme. Merci
Reste que le slideshow s'arrête après avori fait le tour... l'idéal serait qu'il recommence automatiquement.
De plus, elles n'ont pas d'url...
Comment faire?

**SpaceFrog** · 10/06/2008, 13h22

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
<script type='text/javascript'>
var Launch
var Gallerie=new Array();
Gallerie[0]=new Image();
Gallerie[0].src="http://www.apere.org/dev/forme_01.jpg";
Gallerie[1]=new Image();
Gallerie[1].src="http://www.apere.org/dev/forme_02.jpg";
Gallerie[2]=new Image();
Gallerie[2].src="http://www.apere.org/dev/forme_03.png";
 
var RunGal= new Array();
RunGal=RunGal.concat(Gallerie);
 
function DiapoRand(){
if(RunGal.length>0){
		Indice=Math.floor(Math.random()*RunGal.length);
		document.getElementById('result').src=RunGal[Indice].src;
		RunGal.splice(Indice,1)
		setTimeout(DiapoRand,1000)
		}
else{
clearTimeout(Launch);
RunGal=RunGal.concat(Gallerie)
DiapoRand();
}
		}
 
</script>
 
</head>
 
 
<body onload="Launch=setTimeout(DiapoRand,1000)" ;>
<img id="result"  src="forme_01.jpg"> </div>
</body>
</html>

Ceci étant des chemins absolus pour les images :rolleyes:, elle ne sont pas sur ton domaine ???

**gregius** · 10/06/2008, 14h10

si si, je viens de changer cela...

Pour avoir 5 espaces où les images tournent... comment faire?

Il faudrait que si j'ai 20 logos, les images arrivent aléatoirement dans les 5 espaces pendant 10 secondes. et surtout sans répétition. De plus, j'aimerais que ces logos soient cliquables (lien URL).

Merci d'avance de l'aide

**SpaceFrog** · 10/06/2008, 14h30

chaque espace aura son array ou c'est le mêem array pour tous ?

**gregius** · 10/06/2008, 14h38

même array pour tous. Eventuellement dans une table sql avec ID, repertoire et lien URL....
je sais je sais, j'abuse

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

bon alors même array pour tous...

et dans un round d'affichage on enlève toutes les images qui ont été affichées ou au round suivant une espace peut afficher un une iamge affichée par un autre au round précédent ?

Rotation aléatoire de logo avec lien

JavaScript

Discussions similaires

Partager

Partager