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.