Position d'images aléatoire

Version imprimable

29/03/2010, 20h26
bouchontron

Position d'images aléatoire

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
29/03/2010, 21h23
Invité

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.
29/03/2010, 21h31
bouchontron

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

merci!
30/03/2010, 08h48
SpaceFrog

Code:

Math.round()

[edit]
là en fait je voulais ecrire Math.random() :red:
[/edit]
30/03/2010, 10h21
bouchontron

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
30/03/2010, 10h31
SpaceFrog

ben sur le onload, calcule les top et left des div avec un Math.round()....
30/03/2010, 10h39
bouchontron

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 !

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

30/03/2010, 11h13
bouchontron

Ça ne marche pas chez moi ...
le code est il sensé fonctionner telquel ?
30/03/2010, 11h16
SpaceFrog

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

Active javascript :roll:
30/03/2010, 11h21
bouchontron

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
30/03/2010, 11h25
SpaceFrog

Méa Culpa !!! :oops::oops::oops:

Une erreur de copier / coller

et le code état tronqué ...

C'est chose réparée...

maintenant ça va rouler ...
31/03/2010, 00h03
bouchontron

Ça marche ! Merci!