Placements aleatoires images
Bonjour à tous,
Je débute..:D
J'aimerai afficher sur une surface determinée de mon écran, un mur de photos (en vrac, style post it..), chacune avec une position aleatoire horizontale et verticale. (et pour faciliter la chose, les photos ont une taille différentes)
Pour cela, il faut venir chercher les photos et les positionner de façon alétaoire..
Mes problèmes: :?
- il me prends des photos en double (pourtant j'ai essayé de les mettre à part une fois choisie...)
- et bien sur, pb principal: elles se chevauchent... comment l'éviter?
Pouvez vous m'aider ?
D'avance merci...
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
| <style>
div {
position: absolute;
}
#case {width:auto;height:auto;}
</style>
</head>
<body>
<div id="case0"></div>
<div id="case1"></div>
<div id="case2"></div>
<div id="case3"></div>
<div id="case4"></div>
<div id="case5"></div>
<div id="case6"></div>
<div id="case7"></div>
<script>
var chaine=[];
var tab=["bateau0","bateau1","bateau2","bateau3","bateau4","bateau5","bateau6","bateau7"];
for (var i=0;i<8;i++)
{
var imgA = document.createElement("img");
var b = Math.floor(Math.random()*8); // random entre 0 et 7
while(chaine.indexOf(b)>-1) {b = Math.floor(Math.random()*8);}
var c=tab[b];
imgA.src = "img/" + c + ".png";
var randomleft = Math.floor((Math.random() * 500) + 1); // random entre 1 et 500
var randomtop = Math.floor((Math.random() * 500) + 1); // random entre 1 et 500
document.getElementById('case' + i).style.top= randomtop + 'px';
document.getElementById('case' + i).style.left= randomleft + 'px';
document.getElementById('case' + i).appendChild(imgA);
chaine.push[b];
}
</script> |
