http://www.odelia-technologies.com/taxonomy/term/66/0 fr http://www.odelia-technologies.com/node/129 <p><strong>Image Menu</strong> de <a target="_blanck" class="lien_externe" href="http://www.phatfusion.net/">Phatfusion</a> est un élégant menu animé à base d'images, utilisant la librairie <a target="_blanck" class="lien_externe" href="http://mootools.net/">mootools</a>. Pour fonctionner, une page web doit inclure dans son en-tête les fichiers JavaScript <code class="geshifilter">imageMenu.js</code> et <code class="geshifilter">mootools.js</code>, ainsi que le fichier CSS <code class="geshifilter">imageMenu.css</code>.</p> <p>Le menu doit être défini dans la page au moyen d'une liste HTML contenant autant d'éléments <code class="geshifilter">LI</code> que nécessaire : chaque élément <code class="geshifilter">LI</code> déclare l'attribut <code class="geshifilter">class</code> avec la valeur <code class="geshifilter">kwick opt&lt;n&gt;</code>, où <n> peut prendre les valeurs 1, 2, ..., 5.<br/> En effet, le fichier <code class="geshifilter">imageMenu.css</code> définit des sélecteurs CSS pour les classes opt1, opt2, ..., opt5 et permet ainsi d'associer une image pour chaque élément du menu.</p> <p>Voici Image Menu en action avec trois éléments de menu :</p> <div id="kwick"> <ul class="kwicks"> <li class="kwick opt1"><span>Lanscapes</span> </li> <li class="kwick opt2"><span>People</span> </li> <li class="kwick opt3"><span>Nature</span> </li> </ul> </div> <script type="text/javascript"> function test() { alert('Sélection : ' + myMenu.options.selected); } var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200, onClick: test}); </script> <br/> <p>Dans cet exemple, le click sur une image est détectée et une fonction JavaScript est appelée, permettant ainsi l'affichage d'un message utilisateur.<br/>Si vous souhaitiez provoquer la navigation vers une URL particulière, vous pouvez avoir recours à l'objet JavaScript <code class="geshifilter">window</code>, comme ceci :</p> <p><code class="geshifilter javascript">window.<span class="me1">location</span>.<span class="me1">href</span> = <span class="st0">'http://www.odelia-technologies.com/'</span>;</code></p> <p>Le fichier attaché à cet article contient les sources de cette démonstration.</p> http://www.odelia-technologies.com/node/129#comment CSS JavaScript mootools Phatfusion Sat, 18 Aug 2007 07:32:15 +0200 odelia technologies 129 at http://www.odelia-technologies.com