Déplacement aléatoire de div

badiou

18 Feb 2008 à 22:51

Bonsoir à tous,

je travaille actuellement sur une navigation avec des div qui se positionnent à chaque chargement de page aléatoirement sur une plage donnée.
le problème vient du fait que mes deux div se chevauchent parfois.
Quelqu'un aurait-il une astuce pour éviter le chevauchement.
Mon idée, c'est de créer un repositionnement à chaque chargement et éviter que chaque menu de superpose.

Mon fichier HTML fonctionne ainsi :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<script src='random_dplcmt.js'></script>
</head>

<body onLoad="random_position()">
<div id="menu4">
  <p>video 1</p>
  <p>video 2</p>
  <p>video 3</p>
  <p>video 4</p>
</div>
<div id="menuvideos">
  <p>photo 1</p>
  <p>photo2</p>
  <p>photo3</p>
  <p>photo4</p>
</div>
</body>
</html>

Mon javascript est comme ça :

function random_position()
{
titre_left= Math.floor(Math.random() * 225)+55;
document.getElementById("menu4").style.left = +titre_left+"px";
titre_top= Math.floor(Math.random() * 300)+30;
document.getElementById("menu4").style.top = +titre_top+"px";

nav_left= Math.floor(Math.random() * 225)+50;
document.getElementById("menuvideos").style.left = +nav_left+"px";
nav_top= Math.floor(Math.random() * 300)+30;
document.getElementById("menuvideos").style.top = +nav_top+"px";

}

Et ma css, si besoin :

@charset "utf-8";
#menu4 {
	position:absolute;
	background-color: #FF0000;
	width: 100px;
	height:auto;
	top:156px;
	left: 130px;
	display: block;
}
#menuvideos {
	background-color: #FF0000;
	position:absolute;
	top:0px;
	display: block;
	left: 260px;
	top: 46px;
	width: 150px;
	height:auto;
}

D'avance merci à vous parce que là je galère bien et ce défaut est quand même gênant...
à bientôt !