166 lines
5.5 KiB
HTML
166 lines
5.5 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>Syst<EFBFBD>me Solaire en HTML / Javascript</title>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
|||
|
|
|
|||
|
|
<style type="text/css">
|
|||
|
|
<!--
|
|||
|
|
body {
|
|||
|
|
background: url(../imgs/espace.jpg) #000000;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
a.info {
|
|||
|
|
position: relative;
|
|||
|
|
text-decoration: none
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
a.info span {
|
|||
|
|
display: none
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
a.info:hover span {
|
|||
|
|
font-family: Comic Sans MS;
|
|||
|
|
font-size: small;
|
|||
|
|
display: block;
|
|||
|
|
position: absolute;
|
|||
|
|
border: 2px solid #000000;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
color: #000000;
|
|||
|
|
text-align: justify;
|
|||
|
|
padding: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
a img {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.centrage {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.noscript {
|
|||
|
|
font-family: Comic Sans MS;
|
|||
|
|
font-size: x-large;
|
|||
|
|
color: #FFFFFF
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.w3 {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10px;
|
|||
|
|
bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.cv {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 22px;
|
|||
|
|
bottom: 88px;
|
|||
|
|
}
|
|||
|
|
-->
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
<!--
|
|||
|
|
function position(objName,x0,y0,radius,angle)
|
|||
|
|
{
|
|||
|
|
obj=self.document.getElementById(objName);
|
|||
|
|
newX=x0+radius*2*Math.cos(angle);
|
|||
|
|
newY=y0+radius*Math.sin(angle);
|
|||
|
|
obj.style.left=newX;
|
|||
|
|
obj.style.top=newY;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (navigator.appName == 'Netscape') {
|
|||
|
|
function changePosition()
|
|||
|
|
{
|
|||
|
|
angle=temps*0.0008; // vitesse angulaire est de 0.001
|
|||
|
|
position('venus',window.innerWidth/2,window.innerHeight/2,10*1.72,angle/1.62);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
position('terre',window.innerWidth/2,window.innerHeight/2,10*2,angle/2);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
position('mars',window.innerWidth/2,window.innerHeight/2,10*2.52,angle/2.88);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
position('jupiter',window.innerWidth/2,window.innerHeight/2,10*6.2,angle/12.86);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
position('saturne',window.innerWidth/2,window.innerHeight/2,10*8.54,angle/30.46);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
position('uranus',window.innerWidth/2,window.innerHeight/2,10*18.18,angle/85);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
position('neptune',window.innerWidth/2,window.innerHeight/2,10*29.06,angle/165.8);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
}}
|
|||
|
|
|
|||
|
|
if (navigator.appName == 'Microsoft Internet Explorer') {
|
|||
|
|
function changePosition()
|
|||
|
|
{
|
|||
|
|
angle=temps*0.0008; // vitesse angulaire est de 0.001
|
|||
|
|
position('venus',document.body.clientWidth/2,document.body.clientHeight/2,10*1.72,angle/1.62);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
position('terre',document.body.clientWidth/2,document.body.clientHeight/2,10*2,angle/2);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
position('mars',document.body.clientWidth/2,document.body.clientHeight/2,10*2.52,angle/2.88);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
position('jupiter',document.body.clientWidth/2,document.body.clientHeight/2,10*6.2,angle/12.86);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
position('saturne',document.body.clientWidth/2,document.body.clientHeight/2,10*8.54,angle/30.46);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
position('uranus',document.body.clientWidth/2,document.body.clientHeight/2,10*18.18,angle/85);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
position('neptune',document.body.clientWidth/2,document.body.clientHeight/2,10*29.06,angle/165.8);
|
|||
|
|
temps+=intervalDeTemps;
|
|||
|
|
}}
|
|||
|
|
|
|||
|
|
var intervalDeTemps=50;
|
|||
|
|
var temps=0;
|
|||
|
|
myInterval=setInterval("changePosition()",intervalDeTemps);
|
|||
|
|
//-->
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div id="venus" style="position:absolute;z-index:1;">
|
|||
|
|
<a class="info" href="http://fr.wikipedia.org/wiki/V%C3%A9nus_(plan%C3%A8te)"><img src="./planetes/venus38.gif" alt="Venus">
|
|||
|
|
<span>V<EFBFBD>nus</span></a></div>
|
|||
|
|
<div id="terre" style="position:absolute;z-index:2;">
|
|||
|
|
<a class="info" href="http://fr.wikipedia.org/wiki/Terre"><img src="./planetes/terre38.gif" alt="Terre">
|
|||
|
|
<span>Terre</span></a></div>
|
|||
|
|
<div id="mars" style="position:absolute;z-index:3;">
|
|||
|
|
<a class="info" href="http://fr.wikipedia.org/wiki/Mars_(plan%C3%A8te)"><img src="./planetes/mars35.gif" alt="Mars">
|
|||
|
|
<span>Mars</span></a></div>
|
|||
|
|
<div id="jupiter" style="position:absolute;z-index:4;">
|
|||
|
|
<a class="info" href="http://fr.wikipedia.org/wiki/Jupiter_(plan%C3%A8te)"><img src="./planetes/jupiter49.gif" alt="Jupiter">
|
|||
|
|
<span>Jupiter</span></a></div>
|
|||
|
|
<div id="saturne" style="position:absolute;z-index:5;">
|
|||
|
|
<a class="info" href="http://fr.wikipedia.org/wiki/Saturne_(plan%C3%A8te)"><img src="./planetes/saturne48.gif" alt="Saturne">
|
|||
|
|
<span>Saturne</span></a></div>
|
|||
|
|
<div id="uranus" style="position:absolute;z-index:6;">
|
|||
|
|
<a class="info" href="http://fr.wikipedia.org/wiki/Uranus_(plan%C3%A8te)"><img src="./planetes/uranus44.gif" alt="Uranus">
|
|||
|
|
<span>Uranus</span></a></div>
|
|||
|
|
<div id="neptune" style="position:absolute;z-index:7;">
|
|||
|
|
<a class="info" href="http://fr.wikipedia.org/wiki/Neptune_(plan%C3%A8te)"><img src="./planetes/neptune44.gif" alt="Neptune">
|
|||
|
|
<span>Neptune</span></a></div>
|
|||
|
|
|
|||
|
|
<div class="cv"><a class="info" href="http://crystalyx.moncv.com/">
|
|||
|
|
<img src="../imgs/cv.gif" alt="MonCv"><span>MonCv</span></a></div>
|
|||
|
|
|
|||
|
|
<div class="w3">
|
|||
|
|
<a href="http://validator.w3.org/check?uri=referer"><img
|
|||
|
|
src="http://www.w3.org/Icons/valid-html401"
|
|||
|
|
alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
|
|||
|
|
<a href="http://jigsaw.w3.org/css-validator/check/referer">
|
|||
|
|
<img style="border:0;width:88px;height:31px"
|
|||
|
|
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
|
|||
|
|
alt="CSS Valide !">
|
|||
|
|
</a></div>
|
|||
|
|
|
|||
|
|
<noscript><div class="noscript centrage">
|
|||
|
|
Cette page ne s'affichera pas correctement car vous n'avez pas Javascript activ<69>, ou que votre navigateur ne prend pas en charge Javascript
|
|||
|
|
Si vous voulez un navigateur performant, nous vous conseillons Firefox :<br><br>
|
|||
|
|
<a href="http://www.mozilla-europe.org/fr/firefox/"><img border="0" alt="Spreadfirefox Affiliate Button" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox3/125x125FF3.png"></a>
|
|||
|
|
</div></noscript>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|