HTLM/ Widget Image et légende
aqwzsxedc!
-
leito666 Messages postés 83 Statut Membre -
leito666 Messages postés 83 Statut Membre -
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
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
1 réponse
-
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 )-
-
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 .. ) -
...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> -
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
-
