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:

HTLM/ Widget Image et légende
Widget windows 11 - Guide
Legende image - Guide
Image iso - Guide
Widget c'est quoi - Guide
Acronis true image - Télécharger - Sauvegarde

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 )

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 ...

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 .. )

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é ?

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>

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

Discussions similaires

Comment enlever le rouge sur la photo svp ?

PIX

sortir des réseaux sociaux