[SRC] Image aléatoire au chargement de la page
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:
1
2
3
| function randomImg(){
document.getElementById('image').src = "images/image" + Math.round(Math.random()*4+1) + ".gif";
} |
Code:
1
2
3
| <body onload="randomImg()">
<img src="" id="image" />
</body> |
Méthode 2, les noms des images sont totalement différents :
Code:
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:
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.
Pour mettre les images en fond...
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:
1
2
3
| function randomImg(){
document.getElementById('image').style.background ="img/image(" + Math.round(Math.random()*4+1) + ".jpg)";
} |
et dans le code:
Code:
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
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
Image aléatoire dans body
Bonjour à tous,
entretemps, j'ai trouvé un script (que je ne comprend pas complètement), mais qui me donne satisfaction.
Code:
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.
