Image bouton html JavaScript

Image bouton html JavaScript - HTML/CSS - Programmation

Marsh Posté le 22-08-2018 à 16:49:31    

Bonjour, sur mon site web j’aimerai faire un bouton avec deux image à chaque fois que je clique sur la première image on passe à la seconde. Ampoule allumée/ ampoule éteinte.
Quelqu’un pourrait m’orienter sur le code svp?
 
Merci

Reply

Marsh Posté le 22-08-2018 à 16:49:31   

Reply

Marsh Posté le 22-08-2018 à 17:57:21    

Tu rajoutes un id="" à ton image, un event onclick et tu utilises getElementById(id) pour modifier l'attribut src de l'image.
if(src==image1)
  src=image2
else
  src=image1

Reply

Marsh Posté le 24-08-2018 à 17:41:30    

Merci pour la réponse. Je cherche n’arrive pas à l’écrire correctement. Peux-tu m’aider stp? J’apprends

Reply

Marsh Posté le 24-08-2018 à 18:23:30    

<img src="image/Lampeoff.png" style="height:64px; width: 64px" class="Lampeoff";"/>
             <img src="image/Lampeon.png" style="height:64px; width: 64px" class="Lampeon";"/>
 
           <script type="text/javascript">  
 
              Lampeoff = document.getElementById('off');
              Lampeon = document.getElementById('on');
              if(src==lampeoff;
              src=lampeon;
              else;
              scr=lampeoff;
 
           </script>
 
je suis perdu...


Message édité par gdolt le 24-08-2018 à 18:23:55
Reply

Marsh Posté le 24-08-2018 à 20:38:48    

bonjour, j'ai ce code mais j'arrive pas à faire disparaitre l'image lampe_ext_on quand j'appui sur le bouton, par contre la seconde image apparait bien
 
Quelqu'un sait pourquoi.?
merci
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. document.addEventListener('DOMContentLoaded', function()
  6. {
  7. var button = document.getElementById('bouton');
  8. var appears = document.querySelector('.test');
  9. var bool =1;
  10. button.addEventListener('click', function(onClickButton)
  11. {
  12. appears.classList.toggle('hide');
  13. if(bool=== 0)
  14. {
  15. button.innerHTML = "Eteindre";
  16. bool=1;
  17. }
  18. else
  19. {
  20. button.innerHTML = "Allumer";
  21. bool = 0;
  22. }
  23. });
  24. });
  25. </script>
  26. <style>
  27. .hide
  28. {
  29. display: none
  30. }
  31. </style>
  32. <title>test2</title>
  33. </head>
  34. <body>
  35. <div>
  36. <img src="image/Lampe_ext_on.png">
  37. <img class="test hide" src="image/Lampe_ext_off.png">
  38. </div>
  40. <button id="bouton"> voir plus</button>
  42. </body>
  43. </html>


Message édité par gdolt le 24-08-2018 à 21:09:24
Reply

Marsh Posté le 24-08-2018 à 21:03:04    

Tu veux bien mettre ton code entre balises et faire un minimum attention à la mise en page? :o

Reply

Marsh Posté le 24-08-2018 à 21:10:49    

excuse moi je débute pardon

Reply

Marsh Posté le 25-08-2018 à 15:39:37    

Pour ce code là je peux pas te dire, je connais mal le JS, désolé... Faut attendre que quelqu'un d'autre passe. :o

Reply

Marsh Posté le 06-09-2018 à 15:53:20    

Tu t'embête beaucoup j'ai l'impression, si j'ai bien compris, quand tu clique sur un bouton, ça affiche une image, et si tu re clique, ça affiche a nouveau l'image initiale ?  
 
Perso je ferais comme ça :
 

Code :
  1. <input type="button" id="btn" onClick="Switch()">
  2. <img id="img" src="ampoule_on.jpg">
  4. <script>
  6.    function Switch()
  7.   {
  8.      var Img = document.getElementById('img');
  10.      if(Img.src == "ampoule_on.jpg" )
  11.      {
  12.         Img.src = "ampoule_off.jpeg";
  14.      }
  15.      else
  16.      {
  17.          Img.src = "ampoule_on.jpg";
  18.      }
  20.   }
  21. </script>


 
Je n'ai pas testé mais ça devrais fonctionner.
 
PS : n'oublis pas de mettre le chemin complet de l'img partout, même dans le JS (ex : img/ampoule.jpg)
 
Si ça peut aider :jap:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed