Afficher un sous titre en cliquant sur une image
Utilisateur anonyme
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je réalise un Book de fin d'année pour ma formation d'infographie et je suis un peu perdu...
Je souhaite savoir comment faire pour afficher un sous titre en cliquant sur une image.
Petit exemple sur ce site : https://etch.co
J'ai trouvé plusieurs choses sur le Web mais je n'obtiens pas la fonction click.
J'obtiens ce genre de résultat https://tympanus.net/Tutorials/CaptionHoverEffects/index7.html
Je vais dormir ;)
En espérant avoir des messages demain matin.
Bonne nuit et merci !
Je réalise un Book de fin d'année pour ma formation d'infographie et je suis un peu perdu...
Je souhaite savoir comment faire pour afficher un sous titre en cliquant sur une image.
Petit exemple sur ce site : https://etch.co
J'ai trouvé plusieurs choses sur le Web mais je n'obtiens pas la fonction click.
J'obtiens ce genre de résultat https://tympanus.net/Tutorials/CaptionHoverEffects/index7.html
Je vais dormir ;)
En espérant avoir des messages demain matin.
Bonne nuit et merci !
4 réponses
-
salut
tu peux faire en jquery
le html
<figure>
<img src="image.jpg" alt="image">
<figcaption>
<h3>un titre</h3>
<span>un commentaire</span>
<p>etc ....</p>
</figcaption>
</figure>
le css
figcaption {
display:none;
opacity:0.5;
background-color:#CCCCCC;
padding:10px;
margin:0;
}
le jquery (à mettre dans le head)
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$("figure").click(function(){
if ($("figcaption").is(":visible")) {
$("figcaption").animate({opacity:0.4},500).delay(500).slideUp(1000);
}
if ($("figcaption").is(":hidden")) {
$("figcaption").slideDown(1000).animate({opacity:1},500).delay(500);
}
})
})
</script> -
Bonjour,
Pourquoi "en cliquant dessus"????
L'attribut TITLE vous permet d'avoir un sous-titre sans clic:
<img src="monImage.jpg" title="ceci est le sous-titre de l'image"/>
public function meilleurProgrammeurDuMonde() { return "MOI"; } // humour-
-
Sinon il y a l'élément FIGURE:
https://html5.immo-scope.com/article/html5_debuter_elementFigure
exemple:<figure> <img src="imageExemple.jpg"/> <figcaption>l'apéro</figcaption> </figure>
Vous mettez le figcaption en hidden et avec un peu de javascript quand on passe sur figure on le rend visible...
A noter que avec FIGURE vous pouvez indiquer que du texte ASCII est une image:
<figure> <pre> o .''/ ' / ( O .-'' ' ''-._ .') _/ (o) '. .' / ) ))) >< < '\ |_\ _.' '. \ '-._ _ .-' '.) '\__\ </pre> <figcaption>un poisson en Ascii-Art</figcaption> </figure>
-
-
Re,
J'ai travaillé sur ce tutoriel : https://tympanus.net/Tutorials/CaptionHoverEffects/index3.html
Je veux que la barre rectangulaire en bas de l'image s'affiche quand je clique dessus. Je ne veux pas de survol.
J'insère jute le jquery ?-
-
Pourquoi tenez-vous tellement à ce que la légende s'affiche seulement quand on clique sur l'image? Vous avez 20 images, il faut cliquer 20x.... Perso, ça m'emm....erait profondément de devoir cliquer pour voir la légende d'une image...
Je vous ai suggéré FIGURE et l'élément FIGCAPTION avec un lien qui explique comment faire. Pas de javascript, pas de clic... mais au mojns des légendes bien placées sous les images.
A+ -
-
donc c'est hyper simple uniquement un display none a figcaption
puis une petite animation en css3 avec @keyframes
figure:hover figcaption {
dispaly block;
animation ...
etc ....
avec keyframes tu peux faire des apparitions par scale, translation, opacité rotation etc ...
https://www.alsacreations.com/tuto/lire/1299-timing-des-animations-et-des-transitions-en-css3.html
-
-
le tuto c'est du css donc pas de clic uniquement du hover
pour une animation au clic il faut du javascript ou jquery
exemple sur etchapps.com
le html d'une des images
<figure class="with-hidden-caption">
<img class="resize" src="/img/base/spacer.png" rel="/img/studio/shelves.JPG" alt="" />
<noscript><img src="/img/studio/shelves.JPG" alt="" /></noscript>
<figcaption><p>Plants don't last long in our place.</p></figcaption>
</figure>
et le script (minimizé) qui fait le truc (entre autre)
<script src="/js/script-compiled.1394194762.js"></script>
