Comment charger deux images différentes provenant de deux dossiers différents ?

Version imprimable

Bonjour!!!

Je cherche à créer une page web qui affiche 1 image aléatoire piochée un premier dossier et une deuxième image aléatoire pris dans un deuxième dossier.

Voilà ce que j'utilise mais malheureusement la deuxième image ne s'affiche pas. Quelqu'un aurait.il une solution en JS?
Code:

1 2 3 4 5 6 7 8 9 10 11 <script type="text/javascript"> function randomImg(){ document.getElementById('image').src = "CO/" + Math.round(Math.random()*4+1) + ".jpg"; } </script> <script type="text/javascript"> function randomImg1(){ document.getElementById('image').src = "Fond/" + Math.round(Math.random()*4+1) + ".jpg"; } </script>
Code:

1 2 3 4 5 6 7 8 9 10 <body > <body onload="randomImg()"> <img src="" id="image" / border=0 width=300 height=250> </body> <body onload="randomImg1()"> <img src="" id="image" / border=0 width=300 height=250> </body> </body >
Un tout grand MERCI!!!!

Essaye un truc du genre

Code:

1
2
3
function randomImg(){
   document.getElementById('image').src = ((Math.random()*100 & 1)? "CO/":"Fond/") + Math.round(Math.random()*4+1) + ".jpg";
   }

04/11/2014, 11h54
Bovino

Répété un nombre incalculable de fois : un id doit être unique dans la page !

RHaaaaaaaaa m...

C'est pire que ça Beef ...
le code HTML que tu nous montre est juste un ineptie !!!
Code:

1 2 3 4 5 6 7 8 9 10 <body > <body onload="randomImg()"> <img src="" id="image" / border=0 width=300 height=250> </body> <body onload="randomImg1()"> <img src="" id="image" / border=0 width=300 height=250> </body> </body >
Hormis le fait qu'un id doive-t-être unique ...
il ne doit y avoir qu'un seul body ...

04/11/2014, 16h38
meyerbsa

En résumé
Bonjour et merci d'avance pour ces réponses.

Si je comprends bien la chose il faut tout d'abord n'avoir qu'un seul body et des id différentes.

donc si j'opte pour un js du type
Code:

1 2 3 function randomImg(){ document.getElementById('image').src = ((Math.random()*100 & 1)? "CO/":"Fond/") + Math.round(Math.random()*4+1) + ".jpg"; }
que dois-je mettre dans le code html pour avoir mes 2 images issues des 2 dossiers?

Merci

Bon voilà ce que j'ai pour l'instant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <head> <meta content="fr-ch" http-equiv="Content-Language"> <script type="text/javascript"> function randomImg(){ document.getElementById('image').src = ((Math.random()*100 & 1)? "CO/":"Fond/") + Math.round(Math.random()*4+1) + ".jpg"; } </script> </head> <body > <body onload="randomImg()"> <img src="" id="image" / border=0 width=300 height=250> </body>
J'aimerais dans l'idéal afficher deux images et non pas une seule, avec les paramètres suivants:

1ère image issue du dossier CO
2ème image issue du dossier Fond

Auriez-vous une solution?

Merci beaucoup

Une solution!!!

Bonjour,

J'ai pu finalement résoudre mon problème. Voilà la solution proposée et retenue:

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
<HEAD>
 
<meta content="fr-ch" http-equiv="Content-Language">
 
<link href="test.css" rel="stylesheet" type="text/css">
 
</HEAD>
 
<body>
<div id="container">
 
<script type="text/javascript">
var imgA = document.createElement("img");
var randomCO = Math.floor((Math.random() * 5) + 1); // random entre 1 et 5
imgA.src = "CO/" + randomCO + ".jpg";
imgA.classList.add('maclasse');
 
 
var imgB = document.createElement("img");
var randomFond = Math.floor((Math.random() *5) + 1); // random entre 1 et 5
imgB.src = "Fond/" + randomFond + ".jpg";
imgB.classList.add('maclasse');
 
 
document.getElementById('container').appendChild(imgA);
document.getElementById('container').appendChild(imgB);
</script></div>
 
</BODY>

pour le CSS j'ai utilisé ceci:

Code:

1
2
3
4
.maclasse{
    max-height:250px;
    max-width:300px;
}

Merci