Doc: liste

[svganimation.git] / doc / page.html

diff --git a/doc/page.html b/doc/page.html
index d25a525..4ce29b5 100644 (file)
--- a/doc/page.html
+++ b/doc/page.html
@@ -51,7 +51,12 @@ L'idée d'une telle librairie est venue du fait que le logiciel MetaPost per
 </div>
 <h2 id="lutilisation">L'utilisation</h2>
 <h3 id="c&#244;t&#233;-html">C&#244;t&#233; HTML</h3>
-<p>La librairie <code>SVGAnimation</code> d&#233;finit le <em>prototype</em> javascript <code>Animation</code>. Pour l'utiliser il faut d&#233;clarer une balise HTML <code>div</code> avec un identifiant (<code>id</code>) unique. Choisissons pour l'exemple <code>XXXX</code>. &#192; l'int&#233;rieur de ces balises, il faut : * une balise <code>img</code> contenant un image <code>svg</code> qui servira de vignette &#224; l'animation; * une balise <code>div</code> avec l'identifiant <code>id=&quot;XXXX_message&quot;</code> o&#249; <code>XXXX</code> est l'identifiant de la balise englobante. Dans cette balise <em>message</em>, on y met, si on le souhaite, un message &#224; afficher avant le chargement de l'animation; * une balise <code>div</code> avec l'identifiant <code>id=&quot;XXXX_boutons&quot;</code>.</p>
+<p>La librairie <code>SVGAnimation</code> d&#233;finit le <em>prototype</em> javascript <code>Animation</code>. Pour l'utiliser il faut d&#233;clarer une balise HTML <code>div</code> avec un identifiant (<code>id</code>) unique. Choisissons pour l'exemple <code>XXXX</code>. &#192; l'int&#233;rieur de ces balises, il faut :</p>
+<ul>
+<li>une balise <code>img</code> contenant un image <code>svg</code> qui servira de vignette &#224; l'animation;</li>
+<li>une balise <code>div</code> avec l'identifiant <code>id=&quot;XXXX_message&quot;</code> o&#249; <code>XXXX</code> est l'identifiant de la balise englobante. Dans cette balise <em>message</em>, on y met, si on le souhaite, un message &#224; afficher avant le chargement de l'animation;</li>
+<li>une balise <code>div</code> avec l'identifiant <code>id=&quot;XXXX_boutons&quot;</code>.</li>
+</ul>
 <p>En supposant que les images SVG se trouvent dans un r&#233;pertoire nomm&#233; <code>svg</code>, voici un exemple d'une telle structure :</p>
 <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim1&quot;</span><span class="kw">&gt;</span>
   <span class="kw">&lt;img</span><span class="ot"> src=</span><span class="st">&quot;svg/ellipsographe-1.svg&quot;</span><span class="ot"> alt=</span><span class="st">&quot;animation1&quot;</span><span class="kw">/&gt;</span>
@@ -116,7 +121,7 @@ Chargement...
   <span class="va">b</span>.<span class="at">connect</span>()<span class="op">;</span>
 <span class="op">}</span></code></pre></div>
 <p>Fonction qui sera li&#233;e &#224; l'<em>&#233;v&#233;nement</em> <code>onclick</code> d'un bouton proposant, &#224; l'internaute, le chargement de l'animation...</p>
-<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim2&quot;</span>  
+<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim2&quot;</span>
 <span class="ot">  style=</span><span class="st">&quot;margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px&quot;</span><span class="kw">&gt;</span>
  <span class="kw">&lt;img</span><span class="ot"> src=</span><span class="st">&quot;../ellipsographe/svg/ellipsographe-1.svg&quot;</span><span class="ot"> alt=</span><span class="st">&quot;animation1&quot;</span><span class="ot"> style=</span><span class="st">&quot;width:330px;height:240px&quot;</span><span class="kw">/&gt;</span>
  <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;message&quot;</span><span class="ot"> id=</span><span class="st">&quot;anim2_message&quot;</span><span class="kw">&gt;</span>Ellipsographe<span class="kw">&lt;/div&gt;</span>