11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Insertion aléatoire d'images

Bonjour!!!

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

J'ai pu créer un bout de code mais je n'arrive pas à afficher deux images.

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


Quelqu'un peut-il m'aider à solutionner ce problème???

merci d'avance
Modérateur
Bonjour,

Déjà tu n'as qu'une image dans le html donc comme tu ne joues que sur le src de l'image normale que ça ne t'en affiche qu'une. Soit tu en mets 2 dans le html soit tu n'en mets pas et c'est ton Js qui les ajoute au DOM directement.. du genre :

<div id="container"></div>


var imgA = document.createElement("img");
var randomCO = Math.floor((Math.random() * 100) + 1); // random entre 1 et 100
imgA.src = "CO/" + randomCO + "jpg";

var imgB = document.createElement("img");
var randomFond = Math.floor((Math.random() * 100) + 1); // random entre 1 et 100
imgB.src = "Fond/" + randomFond + "jpg";

document.getElementById('container').appendChild(imgA);
document.getElementById('container').appendChild(imgB);

Modifié par _laurent (05 Nov 2014 - 11:51)
Bonjour et MERCI!

C'est exactement ce que je désirais!!!

Juste une petite question encore si j'ose:

Comment faire pour fixer la dimension des images affichées. J'utilisais:

<img src="" id="image" / border=0 width=300 height=250>


Où dois-je le mettre dans le mon code pour que cela fonctionne?
<HEAD>

</HEAD>

<body>
<div id="container"></div>

<script type="text/javascript">
var imgA = document.createElement("img");
var randomCO = Math.floor((Math.random() * 5) + 1); // random entre 1 et 100
imgA.src = "CO/" + randomCO + ".jpg";
var imgB = document.createElement("img");
var randomFond = Math.floor((Math.random() *5) + 1); // random entre 1 et 100
imgB.src = "Fond/" + randomFond + ".jpg";

document.getElementById('container').appendChild(imgA);
document.getElementById('container').appendChild(imgB);
</script>

</BODY>
Modérateur
Plusieurs options :

1) en dur comme tu faisais mais ça implique d'avoir une dimension fixe d'image avec un bon ratio... sinon c'est la déformation et le floutage assuré.
var imgA = document.createElement("img");
var randomCO = Math.floor((Math.random() * 5) + 1); // random entre 1 et 100
imgA.src = "CO/" + randomCO + ".jpg";
imgA.width = "300";
imgA.height = "250";


2) laisser la taille par défaut des images, mais si les images n'ont pas la même taille ca sera pas super

3) ajouter une classe CSS commune à toute tes images et gérer la taille avec des max/min-height/width dans le css. C'est peut etre le plus propre si tes images sont toutes de tailles différentes mais peuvent être plus petite que la taille max... par défaut ca sera leur taille normale jusqu'a une certaine limite que tu fixe.
var imgA = document.createElement("img");
var randomCO = Math.floor((Math.random() * 5) + 1); // random entre 1 et 100
imgA.src = "CO/" + randomCO + ".jpg";
imgA.classList.add('maclasse');

.maclasse{
    max-height:250px;
    max-width:300px;
}


Bonne continuation ! Smiley murf
Un tout grand MERCI. T'es un as!!!

Voilà le code utilisé au final!!!

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


avec le css suivant:
.maclasse{
    max-height:250px;
    max-width:300px;
}


Smiley biggrin Smiley biggrin Smiley biggrin Smiley biggrin

Merci!!!
Modérateur
Cool si ça te convient. Hésites pas à changer le nom des variables et des classes histoire d'y mettre un peu plus de sémantique et de maintenabilité comme ".maclasse" ou ".container", tu peux les remplacer par des noms un peu plus parlant ! Smiley cligne
Sujet clos
Aller à