Discussion :

[stefart]

Bonjour,

Je souhaite afficher une légende sur les photos en utilisant les infos déjà enregistrées dans Alt de img.

Pour cela je suis donc à la recherche d'un script JS pour récupérer le contenue de "alt" et l'afficher dans "title" avec une mise en forme CSS comme légende par dessus l'image.
j'ai un grand nombre d'images sur le site et toute non pas forcement de légende mais une majorité tous de même.

pourriez-vous m'aider ?

[SpaceFrog]

en js pur ? avec jquery c'est fait en 3 lignes ...

[SylvainPV]

Bonjour,

On aurait pu penser utiliser CSS uniquement avec img:after { content: attr(alt); }, mais les pseudo sélecteurs before et after ne fonctionnent pas avec les tags autofermants comme img.

Il faut donc passer par JavaScript. Voilà une solution sans l'usage d'une librairie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
[].forEach.call(document.querySelectorAll("figure > img"), function(img){
    var caption = document.createElement("figcaption");
    caption.innerHTML = img.getAttribute("alt");
    img.parentNode.insertBefore(caption, img.nextSibling);
});

Les images doivent suivre le code HTML5 conseillé pour une image avec sa légende

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<figure>
  <img src="image.jpg" alt="Légende associée" />
  <!-- figcaption sera inséré ici -->
</figure>

[stefart]

Bonjour,
Merci de vos réponses, je pensais plutôt au jquery. Mais je ne suis pas développeur. La solution la plus stable sera la meilleur.

[SylvainPV]

Si tu utilises jQuery, pourquoi ne pas avoir posté dans la section jQuery ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("figure > img").each(function(){
    $('<figcaption>').text($(this).attr('alt')).insertAfter(this);
});

[stefart]

Merci de vos réponses et pardon si j'ai poster dans la rubrique JS mais je ne pensais pas ca possible en jQuery.
Encore une petit question c'est possible de mettre le contenu de la balise "alt" dans la balise "title" de l'image afin qu'il soit lue par les moteurs de recherche.

[NoSmoking]

Bonjour,

Encore une petit question c'est possible de mettre le contenu de la balise "alt" dans la balise "title" de l'image afin qu'il soit lue par les moteurs de recherche.

ce n'est pas à javascript de le faire mais au codeur. Cette façon de faire, faisable coté client, ne sera pas prise en compte coté serveur.

[SylvainPV]

Oui, beaucoup de robots n'exécutent pas le JavaScript donc il faut que l'attribut title soit renseigné directement dans le code HTML.