{"id":842,"date":"2009-01-23T13:54:47","date_gmt":"2009-01-23T12:54:47","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=842"},"modified":"2009-01-23T13:54:47","modified_gmt":"2009-01-23T12:54:47","slug":"inserer-une-image-en-utilisant-la-balise-object","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/inserer-une-image-en-utilisant-la-balise-object\/","title":{"rendered":"ins\u00e9rer une image en utilisant la balise object"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

Si il y a bien une balise HTML qui est mal connue, c’est bien la balise object<\/code>. Elle fait partie officiellement du HTML depuis sa version 4 mais, de part le manque de renouvellement d’Internet Explorer pendant 5 ans, son utilisation pour autre chose que l’insertion de contenu Flash dans une page n’a jamais \u00e9t\u00e9 mise en avant. Un exemple d’utilisation pertinente de la balise object<\/code> peut se faire dans le cadre d’un comic strip . L’un des webcomic que je suis r\u00e9guli\u00e8rement est geeksworld <\/a>de Salagir. J’ai remarqu\u00e9 que pour permettre une meilleur indexation de son comic, Salagir a eu la bonne id\u00e9e de retranscrire l’enti\u00e8ret\u00e9 des bulles de son strip dans la page qui le contient. Ainsi les robots qui vont naviguer sur son site vont non seulement indexer l’image mais \u00e9galement les informations textes qui sont li\u00e9es celle-ci. pour accomplir cela Salagir a mis au point un script qui permet d’extraire le texte d’un fichier PSD<\/a> et il utilise le sch\u00e9ma HTML suivant :<\/p>\n

Le texte du strip vient ici<\/div>\n
<img src="\/path\/to\/my\/image.png" alt="" \/>\n<div class="textstrip">Le texte du strip vient ici<\/div><\/pre>\n
Pour fonctionner correctement, Salagir a donc rajout\u00e9 la r\u00e8gle display:none;<\/code> pour la balise div<\/code> ayant pour attribut class=\"textstrip\"<\/code>. Cette construction bien que fonctionnant parfaitement ne permet pas d’associer directement le texte \u00e0 l’image en ce sens que l’image est ind\u00e9pendante\u00a0du texte et, \u00e0 moins d’utiliser des microformats <\/em>sp\u00e9cifiques aux webcomics (je ne sais pas si cela existe…) le lien entre texte et image n’est pas \u00e9vident. Une solution pour rem\u00e9dier \u00e0 ce manque de relation serait, dans ce cas, d’ins\u00e9rer l’image en utilisant la balise <object><\/code>. Comment ? Suivez le guide.<\/p>\n
1\u00e8re \u00e9tape :<\/strong> on ins\u00e8re l’image en utilisant  les recommandations du W3C et la balise object<\/code> :<\/p>\n
<object type="image\/png" data="\/path\/to\/my\/image.png">\n<\/object><\/pre>\n
2\u00e8me \u00e9tape : <\/strong>on ajoute le texte correspondant au webcomic \u00e0 l’int\u00e9rieur de la balise object :<\/code><\/p>\n
<object type="image\/png" data="\/path\/to\/my\/image.png">\n<div>Le texte du strip vient ici<\/div>\n<\/object><\/pre>\n
V\u00e9rifions si cela fonctionne bien<\/a> sous tous les navigateurs r\u00e9cents ?<\/p>\n