Afficher un sous titre en cliquant sur une image
Utilisateur anonyme
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 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 !
A voir également:
- Afficher un sous titre en cliquant sur une image
- Trouver un film sans le titre - Télécharger - Divers TV & Vidéo
- Image iso - Guide
- Légender une image - Guide
- Je cherche une chanson dont je ne connais pas le titre - Guide
- Mettre une image en filigrane sur word - Guide
4 réponses
salut
tu peux faire en jquery
le html
le css
le jquery (à mettre dans le head)
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:
public function meilleurProgrammeurDuMonde() { return "MOI"; } // humour
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:
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:
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 ?
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+
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
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>
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>
Je vais essayer ça.
Merci.
Je vous tiens au courant.