mvtretrograde/animation.html

   1 <html lang="fr">
   2
   3   <head>
   4     <meta charset="UTF-8">
   5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6     <meta name="viewport" content="width=device-width, initial-scale=1">
   7     <link type="text/css" rel="stylesheet" href="SVGAnimation.css">
   8     <title>Mouvement rétrograde des planètes</title>
   9     <style type="text/css">
  10       #anim1 {
  11         position:relative;
  12         margin: 10px auto;
  13         width: 652px;
  14         padding: 0;
  15         background: url(svg/astro000.svg);
  16         background-repeat: no-repeat;
  17         background-size:652px 572px;
  18       }
  19     </style>
  20   </head>
  21
  22   <body>
  23     <h1>Mouvement rétrograde des planètes</h1>
  24
  25     <p>La version originale (Maxime Chupin) de cette animation avait été
  26     produite au format <b>SWF</b>, vous la trouverez
  27     <a href="/syracuse/metapost/animations/chupin/?idsec=astro">ici</a>.</p>
  28
  29     <div id="anim1">
  30       <img src="svg/astro001.svg" alt="animation1" style="top:0;left:0;width:652px;height:572px"/>
  31       <div class="message" id="anim1_message">Images en cours de chargement...</div>
  32       <div id="anim1_boutons"></div>
  33     </div>
  34
  35     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  36     <script type="text/javascript" src="../SVGAnimation.js"></script>
  37     <script type="text/javascript" src="../SVGPlayerButtons.js"></script>
  38
  39     <script type="text/javascript">
  40       $(window).load(function() {
  41         a1 = new Animation('anim1','svg/astro',1,721);
  42         a1.delai = 40;
  43         a1.pad = 3;
  44         a1.loopOnload();
  45         b1 = new SVGPlayerButtons(a1);
  46         b1.style('full');
  47         b1.connect();
  48       });
  49     </script>
  50   </body>
  51 </html>