Afficher un sous titre en cliquant sur une image
Fermé
Utilisateur anonyme
-
12 avril 2014 à 00:37
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 15 avril 2014 à 01:19
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 15 avril 2014 à 01:19
A voir également:
- Afficher un sous titre en cliquant sur une image
- Je cherche une chanson dont je ne connais pas le titre - Guide
- Image iso - Guide
- Trouver un film sans le titre - Télécharger - Divers TV & Vidéo
- Comment agrandir une image - Guide
4 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
12 avril 2014 à 03:48
12 avril 2014 à 03:48
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>
mpmp93
Messages postés
6648
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
28 septembre 2015
1 339
Modifié par mpmp93 le 12/04/2014 à 08:53
Modifié par mpmp93 le 12/04/2014 à 08:53
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
mpmp93
Messages postés
6648
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
28 septembre 2015
1 339
Modifié par mpmp93 le 12/04/2014 à 21:17
Modifié par mpmp93 le 12/04/2014 à 21:17
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>
Utilisateur anonyme
12 avril 2014 à 13:02
12 avril 2014 à 13:02
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 ?
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
13 avril 2014 à 15:46
13 avril 2014 à 15:46
le code que je t'ai donné (html css et jquery ca marche (a condition d'une seul image visible)
mpmp93
Messages postés
6648
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
28 septembre 2015
1 339
13 avril 2014 à 19:43
13 avril 2014 à 19:43
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+
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
15 avril 2014 à 01:19
15 avril 2014 à 01:19
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
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
12 avril 2014 à 14:41
12 avril 2014 à 14:41
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>
12 avril 2014 à 12:33
Je vais essayer ça.
Merci.
Je vous tiens au courant.