Texte sous un image qui est agrandie au clic de souris

Bonjour
pour mon site web, j'ai une galerie avec plusieurs photo sous forme de vignette. au clic de souris, la photo s' agrandie. Jusque là tous va bien, je voudrai mettre sous la photo agrandie un texte ou une légende. j'ai essayé avec les css mais je galère toujours. Si vous avez des solution je suis preneur.

je vous laisse mes lignes de code pour une meilleur compréhension.

<

div id="grdgalerie"></div><a href="photos_galerie_web/grandes_vignettes/champs_en_fleur.jpg"height="450" width="760" title="Afficher l'image originale">
<img src="photos_galerie_web/petites_vignettes/champs_en_fleur.jpg" height="160" width="260"  alt="miniature"/></br><span>Champs en fleurs"</span></a>

<script>
   var links = document.getElementsByTagName('a'),
          linksLen = links.length;
  for (var i = 2 ; i < linksLen ; i++) {
 links[i].onclick = function() { 
              displayImg(this); 
              return false; 
 };
  }
 function displayImg(link) {
var img = new Image(),
           grdgalerie = document.getElementById('grdgalerie');
img.onload = function() {
            grdgalerie.innerHTML = '';
grdgalerie.appendChild(img);
			   };
 img.src = link.href;
         grdgalerie.style.display = 'block';
        grdgalerie.innerHTML = '<span>Chargement en cours...</span>';
document.getElementById('grdgalerie').onclick = function() {
          this.style.display ='none';
      };
 </script>

merci [/i]
Modifié par 6l20 (13 May 2014 - 09:27)

Bonjour,

Je suis novice dans le domaine mais en lisant ta question je me suis dit qu' en utilisant les balises <figure> (pour ton image) et <figcaption> (pour ta légende) dans ton code HTML ça pourraît peut-être marcher .

http://bit.ly/1lrbKGi

J'espère ne pas être complètement à côté de la plaque.

Bon courage