[JavaScript] [SRC] Image aléatoire au chargement de la page

Bisûnûrs · 07/12/2006, 22h34

Un sujet qui revient souvent dans ce forum et je ne l'ai croisé nulle part dans les sources ou la FAQ donc ...

Citation:

Image aléatoire au chargement de la page

Auteur : Bisûnûrs et un peu tout le monde sur le forum

Description : Permet d'afficher aléatoirement des images dans un répertoire donné, soit avec un nom d'image similaire pour toutes les images, soit avec un nom variable.

Code source :

Méthode 1, Tous les noms des images ont la même structure :

Code js :

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

1
2
3
function randomImg(){
   document.getElementById('image').src = "images/image" + Math.round(Math.random()*4+1) + ".gif";
}

Code html :

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

1
2
3
<body onload="randomImg()">
   <img src="" id="image" />
</body>

Méthode 2, les noms des images sont totalement différents :

Code js :

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

1
2
3
4
5
6
7
8
9
10
function randomImg(){
   var tabImg = new Array();
   tabImg[0]  = "image1.gif";
   tabImg[1]  = "image2.jpg";
   tabImg[2]  = "soleil.gif";
   tabImg[3]  = "poisson.jpg";
   tabImg[4]  = "neuneu.png";
 
   document.getElementById('image').src += tabImg[Math.round(Math.random()*4)];
}

Code html :

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

1
2
3
<body onload="randomImg()">
   <img src="images/" id="image" />
</body>

Remarques : Dans les deux codes précédents on suppose que les images à afficher sont dans un dossier "images" qui est au même niveau dans l'arborescence que la page HTML.

Dans le premier cas, les images sont nommées de image1.gif à image5.gif, d'où le "+1" derrière le "*4", la fonction random() affichant un nombre aléatoire entre 0 et 1.

Le deuxième cas implique que vous devez à chaque fois rajouter une valeur dans le tableau si vous voulez afficher une image de plus.

Pas de problème de compatibilité connu.

Auteur · 11/12/2006, 19h10

personnellement, je préciserai les propriétés de la balise img dans le cas où les images n'ont pas les mêmes dimensions.
Par exemples :

Code CSS :

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

1
2
3
#image{
width: 100px;
}

ou

Code CSS :

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

1
2
3
#image{
height: 100px;
}

On précise soit la hauteur soit la largeur pour éviter des déformations.

Il y a quelque chose qui me chagrine un peu dans la seconde méthode :

Code :

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

1
2
3
4
5
6
  var tabImg = new Array();
   tabImg[0]  = "image1.gif";
   tabImg[1]  = "image2.jpg";
   tabImg[2]  = "soleil.gif";
   tabImg[3]  = "poisson.jpgf";
   tabImg[4]  = "neuneu.png";

Tu mélanges allégrement les gif, jpg et png. Tu me diras qu'une image reste une image, mais je pense qu'il serait plus logique d'uniformiser les formats : utiliser soit des jpg, soit des png mais pas les trois à la fois.

Autres remarques :

Code :

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

1
2
 
document.getElementById('image').src += tabImg[Math.round(Math.random()*4)];

Peut-on le remplacer par :

Code :

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

1
2
3
 
var lTab = tabImg.length-1;
document.getElementById('image').src += tabImg[Math.round(Math.random()*lTab)];

Bisûnûrs · 11/12/2006, 20h46

Mon exemple étant des plus basiques, je ne voyais pas l'intérêt de préciser la taille de l'image, mais c'est une très bonne idée pour ceux qui n'y penseraient pas.

Si dans mon deuxième exemple je mélange ces trois formats c'est pour bien montrer qu'on peut mettre n'importe quelle image dans cet exemple.

Et en effet, on peut faire comme tu le proposes dans le deuxième cas, utiliser la longeur du tableau.

pastissimo · 02/05/2007, 15h28

Je ne connais pas grand chose en script mais j'essaye tout de meme de realiser ma page!....

Est il possible d'integrer la donction "images aléatoires" a un fond ou background?

Merci d'avance

Cdt
Giovanni

Bisûnûrs · 02/05/2007, 15h46

Bien sûr !

A la place de ça :

Code :

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

document.getElementById('image').src = "images/image" + Math.round(Math.random()*4+1) + ".gif";

tu mets :

Code :

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

document.getElementById('iddelelement').style.background = "url(" + Math.round(Math.random()*4+1) + ".gif)";

dans le premier des deux cas, par exemple.

pastissimo · 02/05/2007, 16h11

Merci pour la rapidité de votre réponse!...

Si cela ne vous derrange pas, pourriez vous jetter un oeil a ce qui suit : c'est ce avec quoi je me retrouve et je ne suis pas sur d'y avoir apporté les bonnes modifications...

Code :

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

1
2
3
function randomImg(){
   document.getElementById('image').style.background ="img/image(" + Math.round(Math.random()*4+1) + ".jpg)";
}

et dans le code:

Code html :

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

1
2
<td onload="randomImg()">
   <img src="" id="image" /></td>

mon repertoir image est "img" et mes images sont en "image1", "image2" ....

Merci encore,
Cdt,
Giovanni

Bisûnûrs · 02/05/2007, 16h31

Tu ne peux pas mettre de background à une balise <img> ...
Et il n'existe pas d'attribut onload à la balise <td>.

Code html :

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

1
2
3
<body onload="randomImg()">
...
<td id="imageAleatoire"></td>

Code :

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

1
2
3
function randomImg(){
   document.getElementById('imageAleatoire').style.background = "url(img/image" + Math.round(Math.random()*4+1) + ".jpg)";
}

pastissimo · 02/05/2007, 16h38

Merci énormement pour ce considerable coup de pouce d'ours.

Bonne fin de journée
Giovanni

pastissimo · 25/03/2009, 14h59

Bonjour j'avais utilisé ce script avec votre aide il y a 2 ans et j'aimerai savoir s'il est possible de le dupliquer afin d'avoir 2 zones différentes dans la meme page dans lesquelles des images aléatoires apparaissent ?

J'ai essayé avec les 2 méthodes et rien n'y fait... auriez vous une solution ?
Merci d'avance,
Giovanni

le_chomeur · 26/03/2009, 15h52

bonjour

Code :

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

1
2
3
4
<body onload="randomImg()">
...
<td id="imageAleatoire"></td>
<td id="imageAleatoire2"></td>

Code :

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

1
2
3
4
5
function randomImg(){
   document.getElementById('imageAleatoire').style.background = "url(img/image" + Math.round(Math.random()*4+1) + ".jpg)";
 
   document.getElementById('imageAleatoire2').style.background = "url(img/image" + Math.round(Math.random()*4+1) + ".jpg)";
}

helvetdulac · 09/07/2009, 14h19

Bonjour à tous,

la requête correspond à ce que je cherche, j'ai essayé et si l'image est aléatoire,
toute ma mise en page est chamboulée.
le fichier d'origine est visible à

http://www.granges-sur-baume.com

le fichier modifié est visible à
http://pagesperso-orange.fr/helvetdulac/

j'ai essayé de changer les css mais rien n'y fait !

ou ai-je fait une c...rie ou alors je demande l'impossible.

je précise que je suis nul en js et débutant en css malgré mes 70 printemps

RomainVALERI · 10/07/2009, 09h39

Juste une remarque très secondaire : à propos de la partie "détermination aléatoire"

>>> la répartition des résultats n'est pas homogène avec cette manière d'utiliser Math.random : l'image ayant l'indice le plus haut et celle ayant l'indice le plus bas ont deux fois moins de chances de "sortir" que les autres (ce qui est d'autant moins grave que le nombre d'images est élevé, mais gênant avec peu d'images différentes possibles ^^)

exemple comparatif :

Code javascript :

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
 
function statDe6_Bisunurs() {
   var i, FACES = 6, JETS = 600;
   var resultats = [ 0, 0, 0, 0, 0, 0];
   var message = "";
   for (i = 0; i < JETS; ++i) {
      var alea = Math.round(Math.random() * (FACES - 1));// le problème est ici ^^
      ++resultats[alea];
   }
   for (i = 0; i < FACES ; ++i)
      message += "Nombre de \"" + (i + 1) + "\" obtenus : " + resultats[i] + "\n";
   alert(message);
}
 
function statDe6_RV() {
   var i, FACES = 6, JETS = 600;
   var resultats = [ 0, 0, 0, 0, 0, 0];
   var message = "";
   for (i = 0; i < JETS; ++i) {
      var alea = Math.round((Math.random() * FACES) - .5);// variante proposée
      ++resultats[alea];
   }
   for (i = 0; i < FACES ; ++i)
      message += "Nombre de \"" + (i + 1) + "\" obtenus : " + resultats[i] + "\n";
   alert(message);
}

...bon ça n'a vraiment que peu d'importance mais : c'était pour apporter mon caillou à l'édifice

helvetdulac · 17/07/2009, 20h56

Bonjour à tous,
entretemps, j'ai trouvé un script (que je ne comprend pas complètement), mais qui me donne satisfaction.

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
<head>
<script type="text/javascript">
 
function makeArray(n) {this.length = n;for (var i=1; i<=n; i++) {this[i] = ""; }return this;}var i;
function imagealeatoire() {i = Math.floor(29* Math.random() + 1);return image[i];}
image = new makeArray(3);
image[1]="images/fond-body_1.jpg";
image[2]="images/fond-body_2.jpg";
image[3]="images/fond-body_3.jpg";
image[4]="images/fond-body_4.jpg";
image[5]="images/fond-body_5.jpg";
image[6]="images/fond-body_6.jpg";
image[7]="images/fond-body_7.jpg";
image[8]="images/fond-body_8.jpg";
image[9]="images/fond-body_9.jpg";
image[10]="images/fond-body_10.jpg";
image[11]="images/fond-body_11.jpg";
image[12]="images/fond-body_12.jpg";
image[13]="images/fond-body_13.jpg";
image[14]="images/fond-body_14.jpg";
image[15]="images/fond-body_15.jpg";
image[16]="images/fond-body_16.jpg";
image[17]="images/fond-body_17.jpg";
image[18]="images/fond-body_18.jpg";
image[19]="images/fond-body_19.jpg";
image[20]="images/fond-body_20.jpg";
image[21]="images/fond-body_21.jpg";
image[22]="images/fond-body_22.jpg";
image[23]="images/fond-body_23.jpg";
image[24]="images/fond-body_24.jpg";
image[25]="images/fond-body_25.jpg";
image[26]="images/fond-body_26.jpg";
image[27]="images/fond-body_27.jpg";
image[28]="images/fond-body_28.jpg";
</script>
 
</head>
 
 
 
<body >
<SCRIPT LANGUAGE="JavaScript">
document.write("<IMG SRC=" +imagealeatoire() +" WIDTH=900 HEIGHT=600 BORDER=0>");
</SCRIPT>
 
 </body >

c'est visible sur la page

http://www.granges-sur-baume.com

chaque fois que l'on clique sur l'icône rafraichissement, l'image change.

Mais si ça pouvait changer à chaque clic de la souris, ce serait mieux !
J'ai recommencé à chercher mais , comme je ne sais si c'est possible, je n'arrive pas à formuler correctement les termes de la requête.

02/05/2007, 15h28	#4
pastissimo Invité de passage Inscription : mai 2007 Messages : 4 Détails du profil Informations forums : Inscription : mai 2007 Messages : 4 Points : 4 Points : 4	Question ..... Je ne connais pas grand chose en script mais j'essaye tout de meme de realiser ma page!.... Est il possible d'integrer la donction "images aléatoires" a un fond ou background? Merci d'avance Cdt Giovanni
	00

02/05/2007, 15h46	#5
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Bien sûr ! A la place de ça : Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById('image').src = "images/image" + Math.round(Math.random()4+1) + ".gif"; tu mets : Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById('iddelelement').style.background = "url(" + Math.round(Math.random()4+1) + ".gif)"; dans le premier des deux cas, par exemple.
	00

25/03/2009, 14h59	#9
pastissimo Invité de passage Inscription : mai 2007 Messages : 4 Détails du profil Informations forums : Inscription : mai 2007 Messages : 4 Points : 4 Points : 4	2 ans apres... Bonjour j'avais utilisé ce script avec votre aide il y a 2 ans et j'aimerai savoir s'il est possible de le dupliquer afin d'avoir 2 zones différentes dans la meme page dans lesquelles des images aléatoires apparaissent ? J'ai essayé avec les 2 méthodes et rien n'y fait... auriez vous une solution ? Merci d'avance, Giovanni
	00

09/07/2009, 14h19	#11
helvetdulac Invité de passage Inscription : mai 2007 Messages : 5 Détails du profil Informations personnelles : Âge : 72 Informations forums : Inscription : mai 2007 Messages : 5 Points : 2 Points : 2	Image aléatoire dans body Bonjour à tous, la requête correspond à ce que je cherche, j'ai essayé et si l'image est aléatoire, toute ma mise en page est chamboulée. le fichier d'origine est visible à http://www.granges-sur-baume.com le fichier modifié est visible à http://pagesperso-orange.fr/helvetdulac/ j'ai essayé de changer les css mais rien n'y fait ! ou ai-je fait une c...rie ou alors je demande l'impossible. je précise que je suis nul en js et débutant en css malgré mes 70 printemps
	00

11/12/2006, 20h46	#3
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Mon exemple étant des plus basiques, je ne voyais pas l'intérêt de préciser la taille de l'image, mais c'est une très bonne idée pour ceux qui n'y penseraient pas. Si dans mon deuxième exemple je mélange ces trois formats c'est pour bien montrer qu'on peut mettre n'importe quelle image dans cet exemple. Et en effet, on peut faire comme tu le proposes dans le deuxième cas, utiliser la longeur du tableau.
	00

02/05/2007, 16h38	#8
pastissimo Invité de passage Inscription : mai 2007 Messages : 4 Détails du profil Informations forums : Inscription : mai 2007 Messages : 4 Points : 4 Points : 4	Merci énormement pour ce considerable coup de pouce d'ours. Bonne fin de journée Giovanni
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email