Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
518 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Image bouton html JavaScript

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Image bouton html JavaScript

n°2319411
gdolt
Posté le 22-08-2018 à 16:49:31  profilanswer
 

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

mood
Publicité
Posté le 22-08-2018 à 16:49:31  profilanswer
 

n°2319414
rat de com​bat
attention rongeur méchant!
Posté le 22-08-2018 à 17:57:21  profilanswer
 

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

n°2319450
gdolt
Posté le 24-08-2018 à 17:41:30  profilanswer
 

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

n°2319453
gdolt
Posté le 24-08-2018 à 18:23:30  profilanswer
 

<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
n°2319454
gdolt
Posté le 24-08-2018 à 20:38:48  profilanswer
 

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>
  39. <button id="bouton"> voir plus</button>
  40. </body>
  41. </html>


Message édité par gdolt le 24-08-2018 à 21:09:24
n°2319457
rat de com​bat
attention rongeur méchant!
Posté le 24-08-2018 à 21:03:04  profilanswer
 

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

n°2319458
gdolt
Posté le 24-08-2018 à 21:10:49  profilanswer
 

excuse moi je débute pardon

n°2319466
rat de com​bat
attention rongeur méchant!
Posté le 25-08-2018 à 15:39:37  profilanswer
 

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

n°2320306
HaiDZ
On en a gros !
Posté le 06-09-2018 à 15:53:20  profilanswer
 

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">
  3. <script>
  4.    function Switch()
  5.   {
  6.      var Img = document.getElementById('img');
  7.      if(Img.src == "ampoule_on.jpg" )
  8.      {
  9.         Img.src = "ampoule_off.jpeg";
  10.      }
  11.      else
  12.      {
  13.          Img.src = "ampoule_on.jpg";
  14.      }
  15.   }
  16. </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:


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Image bouton html JavaScript

 

Sujets relatifs
comment récupérer une statistique d'affichage d'une image ?Soucis intégration date dans HTML/JSON
Format HTML DébutantSoucis avec du code CSS sur HTML.
[HTML/PHP/CSS] Diff de 2 données[HTML] Formulaire fonctionnel sur navigateur mais bugué sur instagram.
Effet d'assombrissement d'image (WordPress)Probleme signature html
Bouton skype (code javascript) pas reconnu dans html du site Jimdo 
Plus de sujets relatifs à : Image bouton html JavaScript


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR