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