Contenu alternatif pour une image

[Kulgar]

Bonjour,

Question toute bête.

J'ai la balise suivante :

<img src="mon_image.png" alt="Mon Image" /> 

J'aimerais que le contenu "alternatif" de l'image si elle ne peut être affichée, soit plus touffu, par exemple quelque chose comme ça :

<div id="contenu_alternatif_image">
   <p>
     Mon contenu alternatif avec une belle mise en forme.
     <br />
     Sur plusieurs lignes.
     <br />
     <strong>Et avec plein de balises HTML! </strong>
   </p>
</div>

Le problème, évidemment, c'est que les balises HTML dans l'attribut "alt" ne sont pas interprétées par le navigateur.

Du coup, je me demandais quelle astuce peut-on utiliser pour obtenir quelque chose d'équivalent à ce résultat ? Est-ce possible ?

Je suis ouvert à toutes propositions avec n'importe quel language (HTML/JavaScript/PHP/Rails...).

Merci

Kulgar.

[yuston]

Personnellement, pour faire ce que tu souhaites faire, je ferais :

1. j'insère l'image normalement
   
2. un div #contenu_alternatif_image avec un z-index inférieur à celui de l'image et aux dimensions identiques à la taille de l'image que je placerai en dessous de l'image
   

Donc, selon les navigateurs, si l'adresse de l'image est cassée (ou si c'est un navigateur non graphique), rien ne s'affichera et laissera apparaître le div avec son contenu.

C'est plutôt propre et léger mais ne sera pas forcément simple à mettre en place (si les dimensions des images sont très variables) et parfois, selon les navigateurs, tu auras un effet graphique moche (genre sous IE il y a un cadre qui s'affiche lorsque l'image est cassée).

Et évidemment, cela n'a pas la valeur sémantique "Légende de l'image" ou "Contenu alternatif"....

L'autre solution c'est en PHP (ou tout autre langage) qui vérifie l'existence de l'image. Si non : on affiche le div avec le contenu.

Peut-être qu'il existe un plugin jQuery ou autre qui fait mieux mais je ne le connais pas

[SStephane]

La balise img contient un attribut longdesc qui peut pointer vers un fichier txt, html, php... (ah l'accessibilité, que du bonheur)

Le plus élégant reste sans doute d'aller piocher le contenu là et de l'afficher à la place de l'image si elle n'existe pas lorsque tu génères ta page en php.

if(!file_exists($img->src) && isset($img->longdesc)){ $alt = file_get_contents($img->longdesc) }

C'est sémantiquement ce qui me paraît le plus correct.

Une requête ajax, ça peut le faire aussi dans un élément caché (qu'éventuellement tu fais apparaître au survol).

$('img').each(function(){
  if(null!=$(this).attr('longdesc') && null!=$(this).attr('longdesc')!='')
  {
    $.ajax({
       url: $(this).attr('longdesc')
       //...
    })
  }
});

[Kulgar]

Cool ! Merci beaucoup pour ces astuces, ça va me servir !

Je n'avais pas pensé au Z-index, c'est très astucieux. Je ne connaissais pas non plus longdesc.

Je vais étudier ce qui me paraît être le plus simple à mettre en place dans mon cas précis.

Encore merci .

[Kulgar]

Oh, ben je viens de lire ceci sur W3School concernant l'attribut longdesc de la balise img :

Definition and Usage

The longdesc attribute specifies an URL to a page that contains a long description of an image.

Tip: The longdesc attribute is so poorly supported that it should not be used. To offer a long description of an image, simply create a link (that is visible to anyone) to a page with the description.

Ils indiquent sur leur page qu'aucun navigateur ne le supporte réellement. L'as-tu déjà utilisé SStephane ? Tu n'as pas eu de soucis concernant la compatibilité avec les navigateurs ?

[yuston]

Je pense que la solution de SStephane passe outre l'incompatibilité de cet attribut des navigateurs. Il utilise PHP pour extraire et afficher le contenu!

[Kulgar]

Con de moi, c'est tout à fait exacte...

Merci.