Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1001 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  texte sous une image

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

texte sous une image

n°2292165
grisou-57
Posté le 20-11-2016 à 13:21:17  profilanswer
 

Bonjour a tous
 
pour mon site j'ai une galerie de  petites vignettes, je clic sur la petites photo et une grande apparaît , je reclic et la petite réapparait.
tous marche trés bien avec le code javascript.
je cherche a ajouté une légende sous la grande photo.
j'ai essayé avec figure et figcaption mais ça n"a pas fonctionner.
si quelqu'un a une solution je suis preneur
merci.
 
<div id="grdgalerie"></div>
<p>
 <a href="photos_galerie_web/grandes_vignettes/escalier-tour.jpg" alt="" Class="gal">
<img src="photos_galerie_web/petites_vignettes/1escalier_tour.jpg" height="167" width="266"  alt="miniature"/></a>
<a href="photos_galerie_web/grandes_vignettes/Cabanne_de_chasseur-2+le.jpg" alt="" Class="gal">
 <img src="photos_galerie_web/petites_vignettes/cabane_de_chasseur-2.jpg" height="167" width="266"  alt="miniature"/></a><span>Cabane de chasseur</span>
</p>
<script>
var links = document.getElementsByClassName('gal'),
          linksLen = links.length;
      for (var i = 0 ; 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>


Message édité par grisou-57 le 20-11-2016 à 13:27:00
mood
Publicité
Posté le 20-11-2016 à 13:21:17  profilanswer
 

n°2294059
vale6541
Posté le 26-12-2016 à 14:02:08  profilanswer
 

Bonjour,  
Il faudrait que stockes la légende dans un data par exemple :
<a href="photos_galerie_web/grandes_vignettes/Cabanne_de_chasseur-2+le.jpg" alt="" Class="gal" data-legende='Cabane de chasseur'>  
et tu la récupères dans displayImg() avec link.dataset.legende puis tu injectes ça dans grdgalerie.innerHTML


---------------
Mon prochain PC ==> http://www.generation-net.com/ordi [...] 0a-671070w <==

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  texte sous une image

 

Sujets relatifs
Vba word en-tête image + textequand mouseover texte faire apparaitre une image en arrière plan
Cacher un texte dans une image[python] Generer image à partir de données texte
VBScript : Crée une image PNG issu d'une variable textetexte sous une image agrandie
Wordpress, aligner texte et image dans widgettexte dans image à écrire en bas de celle-ci [résolu]
Centrer une image par rapport à un texte[RESOLU] Générateur de texte sur image
Plus de sujets relatifs à : texte sous une image



Copyright © 1997-2016 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR