Sistema Solare
Di Trantor
SpazioSpazio
SoleSole
TerraTerra
LunaLuna
<html> <head> <title>Sistema Solare</title> <style type="text/css"><!-- #Spazio {position:absolute; z-index:1; color:red} #Sole {position:absolute; z-index:2; color:red} #Terra {position:absolute; z-index:3; color:red} #Luna {position:absolute; z-index:4; color:red} // --> </style> <script type="text/javascript"><!-- n = (document.layers) ? 1:0 ie = (document.all) ? 1:0 var cx=screen.width/2,cy=300,tempo=50 var xt=0,yt=0,rt=150,angt=0,vat=90 var xl=0,yl=0,rl= 40,angl=0,val=40 function Inizio() { if (ie) { document.all.Spazio.style.left =cx-200 document.all.Spazio.style.top =cy-200 document.all.Sole.style.left =cx-50 document.all.Sole.style.top =cy-50 } if (n) { document.layers.Spazio.left =cx-200 document.layers.Spazio.top =cy-200 document.layers.Sole.left =cx-50 document.layers.Sole.top =cy-50 } } function Muovi() { with (Math) { angt=angt+PI/vat angl=angl+PI/val xt=cx+cos(angt)*rt yt=cy-sin(angt)*rt xl=xt+cos(angl)*rl yl=yt-sin(angl)*rl if (ie) { document.all.Terra.style.left =xt-16 document.all.Terra.style.top =yt-16 document.all.Luna.style.left =xl-10 document.all.Luna.style.top =yl-10 } if (n) { document.layers.Terra.left =xt-16 document.layers.Terra.top =yt-16 document.layers.Luna.left =xl-10 document.layers.Luna.top =yl-10 } } } setInterval("Muovi()",tempo) // --> </script> </head> <body onload="Inizio()"> <div id="Spazio"><img src="spazio.gif" alt="Spazio" width="400" height="400">Spazio</div> <div id="Sole" ><img src="sole.gif" alt="Sole" width="100" height="100" >Sole </div> <div id="Terra" ><img src="terra.gif" alt="Terra" width="32" height="32" >Terra </div> <div id="Luna" ><img src="luna.gif" alt="Luna" width="20" height="20" >Luna </div> <hr> </body> </html>
Lezioni di Dynamic HTML