[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 ...

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

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

Contribuez

Vue hybride

Discussions similaires

Partager

Partager