http://ateliers.klafoutis.org/ Les ateliers de Kozlika fr Sat, 04 Oct 2008 15:13:41 +0200 http://blogs.law.harvard.edu/tech/rss Dotclear http://ateliers.klafoutis.org/post/2008/01/14/Image-map urn:md5:be40692e49715832517a3dc44bfa6689 Mon, 14 Jan 2008 18:18:00 +0100 Kozlika Expérimentations <p>Créer des zones réactives sur une seule image à l'aide de règles css.</p> <p>Survolez chaque dessin pour voir l'image réagir. Le dessin fait place au point-virgule seul et chacune des zones fait lien vers la page de la fonte utilisée pour cette démonstration&nbsp;; le nom de chacune de ces fontes s'affiche dans une étiquette au survol.</p> <pre class="brush: html">&lt;div id=&quot;encart&quot;&gt; &lt;ul id=&quot;cdipv&quot;&gt; &lt;li id=&quot;haut&quot;&gt; &lt;ul id=&quot;ulhaut&quot;&gt; &lt;li&gt;&lt;a id=&quot;haut-gauche&quot; href=&quot;http://www.myfonts.com/fonts/linotype/itc-american-typewriter/&quot; title=&quot;American Typewriter&quot;&gt;American Typewriter&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a id=&quot;haut-centre&quot; href=&quot;http://www.dafont.com/en/buy-font.php?f=Algerian+Condensed&amp;amp;v=linotype&quot; title=&quot;Algerian Condensed&quot;&gt;Algerian Condensed&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a id=&quot;haut-droite&quot; href=&quot;http://www.dafont.com/en/font.php?file=anke_calligraphic_f&quot; title=&quot;Anke Calligraphic&quot;&gt;Anke Calligraphic&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li id=&quot;milieu&quot;&gt;&lt;a href=&quot;http://sablier.hautetfort.com/archive/2005/11/10/defense-et-illustration-du-point%E2%80%93virgule-le-comite.html&quot; title=&quot;Le billet fondateur chez Fulgineuse&quot;&gt;Comit&amp;eacute; de d&amp;eacute;fense et d'illustration du point-virgule&lt;/a&gt;&lt;/li&gt; &lt;li id=&quot;bas&quot;&gt; &lt;ul id=&quot;ulbas&quot;&gt; &lt;li&gt;&lt;a id=&quot;bas-gauche&quot; href=&quot;http://www.dafont.com/en/font.php?file=iglook&quot; title=&quot;Iglook&quot;&gt;Iglook&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id=&quot;bas-centre&quot; href=&quot;http://www.linotype.com/596/itcbradleyhand-family.html?PHPSESSID=3ada25f142a7e773a52b39f7cfb99552&quot; title=&quot;Bradley Hand&quot;&gt;Bradley Hand&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id=&quot;bas-droite&quot; href=&quot;http://www.myfonts.com/fonts/apple/chancery/apple-chancery/&quot; title=&quot;Apple Chancery&quot;&gt;Apple Chancery&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;</pre> <p><em>(Cet exemple peut être vu seul et sa concoction consultée en affichant la source de <a href="http://ateliers.klafoutis.org/public/labokoz/cdipv.html">la démo</a> et <a href="http://ateliers.klafoutis.org/public/labokoz/cdipv.png">l'image utilisée</a>.)</em></p> <p>Intitulée «&nbsp;Éloge du point-virgule », cette expérimentation fut réalisée pour <a href="http://www.kozlika.org/kozeries/post/2005/11/15/362-comite-de-defense-et-d-illustration-du-point-virgule">mon blog personnel</a> à l'occasion d'un appel à faire l'éloge du point-virgule.</p> http://ateliers.klafoutis.org/post/2008/01/14/Image-map#comment-form http://ateliers.klafoutis.org/post/2008/01/14/Image-map#comment-form http://ateliers.klafoutis.org/feed/rss2/comments/253