Discussion :

[mickeliette]

Bonjour à tous

J'ai un script qui me permet d'afficher une image aléatoirement.
J'aimerai pouvoir cliquer sur un picto pour déclencher l'affichage d'une image aléatoire...

Voici le code :

Le JS :

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
/* IMG ALEATOIRES HOME */
var nbimage = 50;
var width;
var height;
var url;
var altimg;
function visus()
{
	numimage= Math.round(Math.random()*(nbimage-1)+1);
	if (numimage <= 10)
		{
		url = "img/home/visu01.jpg";
		altimg = "Visu 01";
	}
 
	if (numimage > 10 && numimage <= 20)
		{
		url = "img/home/visu02.jpg";
		altimg = "Visu 02";
	}
 
	if (numimage > 20 && numimage <= 30)
		{
		url = "img/home/visu03.jpg";
		altimg = "Visu 03";
	}
 
	if (numimage > 30 && numimage <= 40)
		{
		url = "img/home/visu04.jpg";
		altimg = "Visu 04";
	}
 
	if (numimage > 40)
		{
		url = "img/home/visu05.jpg";
		altimg = "Visu 05";
	}
 
document.write('<IMG SRC="' + url + '" ALT="' + altimg + '" BORDER="0">')
 
}

Dans ma page .htm :

Code :

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

<SCRIPT LANGUAGE="JavaScript">visus();</SCRIPT>

Le picto permettant d'éxécuter la fonction :

Code :

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

<A HREF="#"><IMG SRC="img/home/fleche_gauche.gif" ALT="" WIDTH="16" HEIGHT="11" BORDER="0"></A>

Merci pour votre aide

[SpaceFrog]

Code :

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

<div style='cursor:pointer;' onclick='visus()'><IMG SRC="img/home/fleche_gauche.gif" ALT="" WIDTH="16" HEIGHT="11" BORDER="0"></div>

[mickeliette]

Merci SpaceFrog, mais ce n'est pas ça...

En fait quand on clique sur le picto "fleche_gauche.gif", ça doit pouvoir relancer la fonction aléatoire "visus" et du coup changer le visuel

Code :

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

<div style='cursor:pointer;' onclick='visus()'><IMG SRC="img/home/fleche_gauche.gif" ALT="" WIDTH="16" HEIGHT="11" BORDER="0"></div>

[SpaceFrog]

donc il ne faut pas faire un document.write pour la balise img...

il faut qu'elle soit "en dur" dans le code avec un id et tu changes dynamiquement le src de l'image dans ta fonction visu ...

[mickeliette]

Arf !

Peux-tu me mettre un exemple de comment tu t'y prendrai ?
Merci

donc il ne faut pas faire un document.write pour la balise img...

il faut qu'elle soit "en dur" dans le code avec un id et tu changes dynamiquement le src de l'image dans ta fonction visu ...

[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
35
36
37
38
39
40
41
42
/* IMG ALEATOIRES HOME */
var nbimage = 50;
var width;
var height;
var url;
var altimg;
function visus()
{
   numimage= Math.round(Math.random()*(nbimage-1)+1);
   if (numimage <= 10)
      {
      url = "img/home/visu01.jpg";
      altimg = "Visu 01";
   }
 
   if (numimage > 10 && numimage <= 20)
      {
      url = "img/home/visu02.jpg";
      altimg = "Visu 02";
   }
 
   if (numimage > 20 && numimage <= 30)
      {
      url = "img/home/visu03.jpg";
      altimg = "Visu 03";
   }
 
   if (numimage > 30 && numimage <= 40)
      {
      url = "img/home/visu04.jpg";
      altimg = "Visu 04";
   }
 
   if (numimage > 40)
      {
      url = "img/home/visu05.jpg";
      altimg = "Visu 05";
   }
 
document.gatElementById('picture').src=url;
document.gatElementById('picture').alt= altimg;
}

Dans ta page .htm :

Le picto permettant d'éxécuter la fonction :

Code :

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

1
2
<A HREF="#"><IMG SRC="img/home/fleche_gauche.gif" ALT="" WIDTH="16" HEIGHT="11" BORDER="0" onclick='visus()'></A>
<IMG SRC="monimage.gif" ALT="coucou" id="picture" BORDER="0">

[mickeliette]

Merci SpaceFrog 8)