Sujet Précédent Sujet Suivant

HTLM/ Widget Image et légende

Fermé
aqwzsxedc! - 13 juil. 2016 à 13:24
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017 - 13 juil. 2016 à 18:12
Bonjour,
J'ai trouvé un code qui me permet de cacher un texte au clic mais je voudrais faire l'inverse : au clic sur l'image, afficher le texte.
voici le code

<figure>
<img src="image.jpg" alt="image">
<figcaption>
<h3>un titre</h3>
<span>un commentaire</span>
<p>etc ....</p>
</figcaption>
</figure>

PS : une petite question qui peut paraître idiote, "image.jpg" c'est quoi concrètement? Si je veut mettre une image où je trouve ce qui y correspond
A voir également:

1 réponse

Réponse 1 / 1
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par leito666 le 13/07/2016 à 14:14
Bonjour :)

_ <<J'ai trouvé un code qui me permet de cacher un texte au clic >>

serait-il possible de voir le code dans son intégralité ?


"image.jpg" c'est le nom d'un fichier image (nom de la photo )
.. et ".jpg" c'est le format
( pour une photo avec des chatons on peut appeler le fichier cats.jpg ou bien cats.png )
0
aqwzsxedc!
13 juil. 2016 à 16:59
Je n'était même pas au courant qu'il n'était pas complet !
Donc désolé mais je suis dans l'impossibilité de vous le fournir !
<figure>
<img src="image.jpg" alt="image">
<figcaption>
<h3>un titre</h3>
<span>un commentaire</span>
<p>etc ....</p>
</figcaption>
</figure>
c'est le seul code que j'ai ...
0
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par leito666 le 13/07/2016 à 17:09
Ce code est à " copier / coller " sur le site :
codepen.io/pen
( dans la case HTML ) 

<html>
  <body>

    <script>
      function myFunction() {
        var x = document.getElementById("demo");
        x.style.fontSize = "0px"; 
      }
    </script>

    <img onclick="myFunction()" src="http://img15.hostingpics.net/pics/566590Capturedu20160623005801.png" alt="CommentCaMarche" style="width:200px">

    <p id="demo">bla bla bla bla bla bla</p>

  </body>
</html>


Après il faut cliquer sur le logo ( image ) rouge et blanc pour " supprimer " le texte
( il prend une taille égal à 0 .. )
0
aqwzsxedc! > leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
13 juil. 2016 à 17:32
oui, c'est ce que je veux mais comment faire pour qu'il soit d'office caché ?
0
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par leito666 le 13/07/2016 à 18:06
...d'office caché...? oups ... 

<html>
  <body>

    <script>
      function myFunction() {
        var x = document.getElementById("demo");
        x.style.fontSize = "20px"; 
      }
    </script>

    <img onclick="myFunction()" src="http://img15.hostingpics.net/pics/566590Capturedu20160623005801.png" alt="CommentCaMarche" style="width:200px">

    <p id="demo" style="font-size:0px">bla bla bla bla bla bla</p>
     
  </body>
</html>
0
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par leito666 le 13/07/2016 à 18:51
Astuce pour le site --> codepen.io/pen

__ clique sur SETTINGS
__ clique sur BEHAVIOR
__ puis dans " Want a Run Button? " décoche Auto Update Preview
__ et clique sur close

Après ça le nouveau bouton " RUN " permet de relancer le script ;)
( on peut alors modifier le code tranquillement et enfin cliquer sur " run " quand on a fini toutes les modifs , sinon la page recharge le code à chaque caractère modifié.. )

bonne chance
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Comment enlever le rouge sur la photo svp ?
lucas0909 -
bazfile -

11 réponses