Position d'images aléatoire

**bouchontron** · 29/03/2010, 20h26

Bonjour à tous !

Je cherche a faire une page en html avec des images deplaçables comme dans cet exemple:
http://www.axelpeemoeller.com/
Mais je souhaiterais qu'a l'ouverture de la page les images se placent de façon aléatoire dans la page.
De sorte qu'on ait une nouvelle dispodition des images a chaque chargement de la page .

Comment faire ?

Merci d'avance ,

côme

Invité · 29/03/2010, 21h23

salut,

les images peuvent-elles se chevaucher?genre etre superposées pil poil par exemple.
edit : dans l'immédia un coup de random pour toutes les images pis ca va tres bien. Le risque étant qu'on ait plein de superpositions...cqui est pas trop grave si on peut bouger les images, mais d'où ma question précédente.

**bouchontron** · 29/03/2010, 21h31

Oui bien sur !
Position complètement aléatoire, dans une zone définie.

merci!

**SpaceFrog** · 30/03/2010, 08h48

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Math.round()

[edit]
là en fait je voulais ecrire Math.random() :red:
[/edit]

**bouchontron** · 30/03/2010, 10h21

heuuuu..
mais encore ?

Pour être un peu plus precis,
je souhaite avoir une serie de div deplaçables dont la position se fait aléatoirement au chargement

merci

**SpaceFrog** · 30/03/2010, 10h31

ben sur le onload, calcule les top et left des div avec un Math.round()....

**bouchontron** · 30/03/2010, 10h39

bonjour,

serait-il possible d'avoir un reponse un peu plus précise?
Je suis très debutant en javascript et html, et donc je ne sais pas comment gérer cette position aléatoire en plus du fait que les div soit deplacables...

merci !

**SpaceFrog** · 30/03/2010, 11h02

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
47
48
49
50
51
52
53
54
55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type="text/javascript">
function RandomPlace(){
var mintop=100
var maxtop=450
var minleft=100
var maxleft=700
tabdiv=document.getElementsByTagName('div')
var i=0;
while (tabdiv[i++]){
	tabdiv[i-1].style.top=mintop+Math.floor(Math.random()*(maxtop-mintop))+'px';
	tabdiv[i-1].style.left=minleft+Math.floor(Math.random()*(maxleft-minleft))+'px';
	tabdiv[i-1].style.zIndex=i
	}
}
</script>
<style type="text/css">
html, body {height:100%; width:100%;}
body{margin:0;
padding:0;}
div {position:absolute;
      width:100px;
      height:100px;
      }
#one {background-color:red;}
#two {background-color:lime;}
#three {background-color:yellow;}
#four {background-color:orange;}
#five {background-color:pink;}
#six {background-color:green;}
#seven {background-color:black;}
#eight {background-color:blue;}
</style>
 
</head>
 
<body onload="RandomPlace()">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
 
</body>
 
</html>

**bouchontron** · 30/03/2010, 11h13

Ça ne marche pas chez moi ...
le code est il sensé fonctionner telquel ?

**SpaceFrog** · 30/03/2010, 11h16

testé sous IE 5,6,7,8 + Chrome + firefox

Active javascript

**bouchontron** · 30/03/2010, 11h21

c'est activé biensûr ....

je remarque qu'il n'y a pas de body dans le code

que dois je metttre pour que ca fonctionne, si on considère que dans le div "one" doit s'afficher image_one.png, dans le div "two" doit s'afficher image_two.png, etc .... et non pas des background color