</div>
<h2 id="lutilisation">L'utilisation</h2>
<h3 id="côté-html">Côté HTML</h3>
-<p>La librairie <code>SVGAnimation</code> définit le <em>prototype</em> javascript <code>Animation</code>. Pour l'utiliser il faut déclarer une balise HTML <code>div</code> avec un identifiant (<code>id</code>) unique. Choisissons pour l'exemple <code>XXXX</code>. À l'intérieur de ces balises, il faut : * une balise <code>img</code> contenant un image <code>svg</code> qui servira de vignette à l'animation; * une balise <code>div</code> avec l'identifiant <code>id="XXXX_message"</code> où <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 à afficher avant le chargement de l'animation; * une balise <code>div</code> avec l'identifiant <code>id="XXXX_boutons"</code>.</p>
+<p>La librairie <code>SVGAnimation</code> définit le <em>prototype</em> javascript <code>Animation</code>. Pour l'utiliser il faut déclarer une balise HTML <code>div</code> avec un identifiant (<code>id</code>) unique. Choisissons pour l'exemple <code>XXXX</code>. À l'intérieur de ces balises, il faut :</p>
+<ul>
+<li>une balise <code>img</code> contenant un image <code>svg</code> qui servira de vignette à l'animation;</li>
+<li>une balise <code>div</code> avec l'identifiant <code>id="XXXX_message"</code> où <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 à afficher avant le chargement de l'animation;</li>
+<li>une balise <code>div</code> avec l'identifiant <code>id="XXXX_boutons"</code>.</li>
+</ul>
<p>En supposant que les images SVG se trouvent dans un répertoire nommé <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"><div</span><span class="ot"> id=</span><span class="st">"anim1"</span><span class="kw">></span>
<span class="kw"><img</span><span class="ot"> src=</span><span class="st">"svg/ellipsographe-1.svg"</span><span class="ot"> alt=</span><span class="st">"animation1"</span><span class="kw">/></span>
<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ée à l'<em>événement</em> <code>onclick</code> d'un bouton proposant, à l'internaute, le chargement de l'animation...</p>
-<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw"><div</span><span class="ot"> id=</span><span class="st">"anim2"</span>
+<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw"><div</span><span class="ot"> id=</span><span class="st">"anim2"</span>
<span class="ot"> style=</span><span class="st">"margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px"</span><span class="kw">></span>
<span class="kw"><img</span><span class="ot"> src=</span><span class="st">"../ellipsographe/svg/ellipsographe-1.svg"</span><span class="ot"> alt=</span><span class="st">"animation1"</span><span class="ot"> style=</span><span class="st">"width:330px;height:240px"</span><span class="kw">/></span>
<span class="kw"><div</span><span class="ot"> class=</span><span class="st">"message"</span><span class="ot"> id=</span><span class="st">"anim2_message"</span><span class="kw">></span>Ellipsographe<span class="kw"></div></span>
avec un identifiant (`id`) unique. Choisissons pour l'exemple `XXXX`.
À l'intérieur de ces balises, il
faut :
+
* une balise `img` contenant un image `svg` qui servira de vignette à
l'animation;
* une balise `div` avec l'identifiant `id="XXXX_message"` où `XXXX` est
l'internaute, le chargement de l'animation...
~~~~~~~ { .html }
-<div id="anim2"
+<div id="anim2"
style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
<img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
<div class="message" id="anim2_message">Ellipsographe</div>