Bonjour tout le monde.
Je suis en train de faire un site j'ai mis un manège 3D dans ma page. Ce manège 3D je l'ai trouvé sur ce site:
http://www.javascriptfr.com/codes/MANEGE-3D_42274.aspx
Mon problème est que je souhaite mettre 5 images au lieu de 13. J'ai reussi mais les images ne se disposent pas correctement sur le "cercle". En fait, elles se placent toutes entassés dans une partie du cercle.
J'ai un peu transformé le code en fonction de ma mise en page. Voici le code:
Code Javascript :
<head>
<meta http-equiv="content-type" content="text/html/php; charset=utf-8" />
<title>Major Dames Salon Services</title>
<link rel="shortcut icon" href="/logomdss.ico" type="icon/ico">
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<style>
<!--.imag{position:absolute;cursor:pointer;margin-left:-40px;}
//-->
</style>
<script language=javascript>
<!--
var angle=0,ll,hh,bcl,vit=0.010;
//taille des vignettes
var taille=150
//largeur de tout le manège
var largeur=250
//hauteur de tout le manège
var hauteur=50
//images du manège
var pict=["images/menage.jpg",
"images/menage.jpg",
"images/menage.jpg",
"images/menage.jpg",
"images/menage.jpg",
"images/menage.jpg"]
//lien des vignettes dans l'ordre des images ci dessus
var lien=["index.html",
"http://editeurjavascriptfr.com",
"http://google.fr",
"http://google.fr",
"http://google.fr",
"http://google.fr"]
function window_onload(){
for(i=1;i<6;i++){
document.body.innerHTML+="<img id=i"+i+" src="+pict[i-1]+" onmouseover=\"vit=0\" onmouseout=\"vit=0.010\" onclick=\"location.href=\'"+lien[i-1]+"\'\" class=imag>"
}
return move()
}
function move(){
ll=document.body.clientWidth/2
hh=document.body.clientHeight/2
angle=angle-vit
for(i=1;i<6;i++){
document.getElementById("i"+i).style.left=ll+largeur*(Math.cos(angle+i*Math.PI/6))
document.getElementById("i"+i).style.top=hh+hauteur*(Math.sin(angle+i*Math.PI/6))+document.getElementById("i"+i).width/2
agl=angle+i*Math.PI/6
document.getElementById("i"+i).width=20*(Math.sin(agl))+taille
document.getElementById("i"+i).style.zIndex=50*(Math.sin(agl))+100
document.getElementById("i"+i).style.opacity=(Math.sin(agl)+1)*0.50
document.getElementById("i"+i).style.filter="alpha(opacity="+(Math.sin(agl)+1)*50+")"
}
setTimeout("move()",1)}
//-->
</script>
</head>
<body onload="window_onload()">
<div id="header">
<center><img src="images/header.png" border="0px"></center>
</div>
<div id="menu">
<center>
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td><a href="index.html"><img id="accueil" src="images/vide.png" border="0px"></a></td>
<td><a href="quisommesnous.html"><img id="qui_sommes_nous" src="images/vide.png" border="0px"></a></td>
<td><a href="nos_domaines.html"><img id="nos_domaines" src="images/domaines_hover.png" border="0px"></a></td>
<td><a href="avantages_fiscaux.html"><img id="avantages_fiscaux" src="images/vide.png" border="0px"></a></td>
<td><a href="devis.html"><img id="devis" src="images/vide.png" border="0px"></a></td>
<td><a href="notre_personnel.html"><img id="notre_personnel" src="images/vide.png" border="0px"></a></td>
<td><a href="contact.html"><img id="contact" src="images/vide.png" border="0px"></a></td>
</tr>
</table></center>
</div>
<div id="corps">
</div>
<div id="footer"></br>
<center><p><a href="index.html">Accueil</a> <img src="images/separateur.png"> <a href="quisommesnous.html">Qui sommes nous?</a> <img src="images/separateur.png"> <a href="nos_domaines.html">Nos domaines</a> <img src="images/separateur.png"> <a href="avantages_fiscaux.html">Avantages fiscaux</a> <img src="images/separateur.png"> <a href="devis.html">Devis</a> <img src="images/separateur.png"> <a href="notre_personnel.html">Notre personnel</a> <img src="images/separateur.png"> <a href="contact.html">Contact</a></center>
</div>
<body>
</html>
Si quelqu'un pourrait me donner un coupe de main se ça m'aiderai beaucoup.
Merci d'avance.