Texte qui s'affiche au click sur image
mohidou71
Messages postés
14
Statut
Membre
-
Pitet Messages postés 2845 Statut Membre -
Pitet Messages postés 2845 Statut Membre -
Bonjour,
j'ai besoin d'un code HTML qui me fasse ce qui suit:
au click sur image (exemple image du directeur général) un texte s'affiche contenant le mot du directeur général et qu'on peut fermer a l'aide de la croix X.
Remarque: si un code CSS est nécessaire pas de soucis, j'accepte.
merci d'avance
j'ai besoin d'un code HTML qui me fasse ce qui suit:
au click sur image (exemple image du directeur général) un texte s'affiche contenant le mot du directeur général et qu'on peut fermer a l'aide de la croix X.
Remarque: si un code CSS est nécessaire pas de soucis, j'accepte.
merci d'avance
A voir également:
- Texte qui s'affiche au click sur image
- Extraire texte d'une image - Guide
- Image iso - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
2 réponses
Salut,
Un exemple très simpliste en css/html :
Tu peux remarquer que le bouton Fermer n'est pas nécessaire dans cet exemple, on peut cacher le texte en cliquant n'importe où sauf sur l'image.
Pour une solution plus poussée et plus personnalisée, il faudrait utiliser javascript pour modifier la propriété css display en fonction des clics sur l'image et le bouton fermer.
Bonne journée,
Un exemple très simpliste en css/html :
<a class="clickimage" href="#"><img src="https://placehold.it/350x150" alt=""></a> <div class="contenu"> <button class="fermer">X Fermer</button> <div class="texte">texte</div> </div>
/* on cache le contenu */
.contenu {
display: none;
border: solid 1px gray;
}
/* on affiche le contenu lors du clic sur l'image */
.clickimage:focus ~ .contenu {
display: block;
}
.fermer {
float: right;
}
.texte {
padding: 20px;
}
Tu peux remarquer que le bouton Fermer n'est pas nécessaire dans cet exemple, on peut cacher le texte en cliquant n'importe où sauf sur l'image.
Pour une solution plus poussée et plus personnalisée, il faudrait utiliser javascript pour modifier la propriété css display en fonction des clics sur l'image et le bouton fermer.
Bonne journée,
mohidou71
Messages postés
14
Statut
Membre
Merci, je vais le tester pour voir ce que sa donne