Création d'un site

Signaler
-
 Ahay -
Bonjour,



Je voudrais créer une fonctionnalité sur une page de mon site à ce propos je voudrais savoir comment faire pour afficher une image en cliquant sur un bouton ? En fait le bon represente un (Jour) et je voudrais que en cliquant sur le bouton une image apparaisse sur la meme page juste en dessous du bouton

1 réponse

Messages postés
91
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
4 mai 2020
22
Hello,
un petit exemple ici :
https://stackoverflow.com/questions/44409223/show-image-in-a-popup-when-i-click-button

Regarde du côté de tout ce qu'on appelle fenêtre modal.

tiens par exemple :
https://codepen.io/search/pens?q=modal+box

@+

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Ma réponse t'a un peu aidé ? Si oui, un petit merci... Merci.
Salut,
sur la même page pas en pop up ou modal la réponse est similaire et encore plus simple: cela passe par un peu de JavaScript voir par ici:

https://www.w3schools.com/jsref/prop_html_innerhtml.asp

En remplaçant la valeur qui change au clic par une nouvelle image dans son destinataire(container HTML).
JavaScript sert beaucoup à manipuler le HTML donc il faut que vous soyez au point là dessus.

exemple simple à tester et intégrer à votre site:
<p id='zoneImage'></p><!-- un container de texte vide //-->
<a href='#' id='afficher' >afficher image</a>
<script>
document.getElementById('afficher').addEventListener('click', function(){
    document.getElementById('zoneImage').innerHTML='<img src="monImage.jpg" alt="description image" />
});

Voilà si vous bloquez sur une des fonctions JavaScript ou un élément HTML tout est détaillé dans le manuel qui se trouve dans le lien en début de message, il suffit de faire une recherche dessus.

Mais bon tout dépends de comment vous faites le site et ce que vous entendez par "le bon représente un (Jour)".

Si c'est en dynamique il faudrait adapter le code en page dynamique(le lien ou l'image peuvent changer et sont indiqués par une base de données) donc passer par le langage serveur utilisé voire AJAX.

Si ça peut varier mais pas en dynamique il faut un peu plus de programmation aussi mais c'est plus simple otut peut-être fait avec JavaScript.