Utilisation de la balise object pour afficher des images en lieu et place de img
Suite à cette très intéressante discussion sur le forum d'alsacréation, dans le texte qui suit j'ai inséré une image avec object au lieu de img. C'est un logo…
Le texte incorporé comme contenu supplémentaire apparaît si je désactive les images dans mon navigateur. Il est vrai que l'attribut alt permet la même chose avec img sauf qu'ici on n'est pas limité par la taille et on peut y mettre le contenu que l'on veut (paragraphe, titre, etc) puisque c'est de l'html classique. Voici le code :
<object type="image/png" data="/all-blogs/public/imagesdc1/parallels/parallels.png" width="113" height="75">
<p>…Le logo de l'application parallels…</p>
</object>
Un autre avantage de la balise object c'est que l'on peut encapsuler des object dans des object et générer ainsi un effet de cascade. Par exemple si l'on place un objet en svg, on peut y mettre une alternative en png au cas où le navigateur ne supporterait pas le svg et enfin le texte en html. Ce qui nous donne ceci visuellement :
Avec le code suivant :
<object type="image/svg+xml" data="/all-blogs/public/imagesdc1/testsvg/zapfino.svg" width="200" height="49">
<object type="image/png" data="/all-blogs/public/imagesdc1/testsvg/zapfino.png" width="200" height="49">
<p>Du texte en Zapfino…</p>
</object>
</object>
Cet exemple est certe un peu simplet mais on pourrait très bien imaginer un graphique en tarte représentant les parts de marché des navigateurs en svg, puis le même en png et enfin le résultat sous forme de tableau html. 
En plus le texte supplémentaire en html est indexé par les moteurs de recherche et lu par les personnes utilisant une synthèse vocale. Les possibilités sont immenses. 
Ajout du lendemain : il semblerait que l'affichage déconne dans IE6. Boah, comme disait Laurent Denis : Encore quelques mois à attendre et on pourra proposer aux derniers utilisateurs d'IE6 un design sans CSS
. On ne devra plus se casser la tête pour ce navigateur obsolète. Bref, vous qui passez ici par hasard, il est grand temps de passer à IE7 ou mieux de passer à un navigateur plus moderne comme Firefox, Safari (beta pour le moment sur windows), Opera, etc.
Commentaires
J'utilise la balise object pour le référencement de m'on site en flash et je rajoute du texte ...mais je voulais savoir les personnes utilisant une synthèse vocale...c'est quoi au juste...un système pour non voyant.
Il y a deux systèmes (complémentaires) :
- La synhèse vocale qui va énoncer le contenu de la page web avec possibilité de voyager de titres en titres (si le site est bien fait)
- La plage braille (zone tactile avec des picots pour simuler le texte en braille) très pratique pour eux taper du texte et voir si il n'y a pas de fautes de frappe.
J'ai été voir ton site, en effet le texte alternatif est bien présent mais ça manque un peu de sémantique html.Hello,
en fait je suis tombé par hasard sur ton billet, je cherchais tout bêtement la syntaxe correcte pour utiliser <object> avec une image :-))
Alors petite contribution perso à ton topo.
Laurent Denis parlait dans la discussion que tu as mise en lien de l'utilisation des données exif. En fait je suis pour ma part parti des données IPTC que l'on peut mettre facilement dans l'image elle même.
Alors voila,
au lieu d'insérer une description dans <object> on peut y insérer un lien vers une page de traitement avec un script php récupérant le champ IPTC de description, et youpla.
http://www.clb56.fr/test_image_in_o...
et pour le sript de traitement :
http://www.clb56.fr/test_image_in_o...
ce qu'il y a de bien c'est qu'on peut combiner les deux, texte court et lien vers description plus longue.
++
Woaow! Merci pour l'astuce clb56…
Après fréquentation assidue du forum, il semble que le texte encapsulé soit inaccessible à la synthèse vocale…