Sujet Précédent Sujet Suivant

Bouton on off sur div

Résolu/Fermé
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017 - Modifié par leito666 le 10/06/2016 à 05:23
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017 - 23 juin 2016 à 06:10
Bonjour :)

Voici une démo avec deux images + un bouton ON et autre un OFF .

--> w3schools.com/html/tryit.asp?filename=tryhtml_script_attribute

Dans un premier temps j'ai modifié le code original afin d'obtenir le même résultat avec 1 seul bouton .

le script à copier/coller pour remplacer celui de la démo
( après cliquez sur " See Result " ) : 
<!DOCTYPE html>
<html>

  <body>
  
  <script type="text/javascript">
  
  var i = 0;

  function incNumber() {
  
    if (i < 1) {
      i++;
      pic = "pic_bulbon.gif"
                
    } else if (i = 2) {
      i = 0;
      pic = "pic_bulboff.gif"
    }

    document.getElementById("display").innerHTML = i;
    document.getElementById('myImage').src = pic;             
  }
                
  </script>
    
    <img id="myImage" src="pic_bulboff.gif" width="100" height="180">
    <label id="display"></label>
    <button type="button" value="Increase" id="inc" onclick="incNumber(1)">on off</button>
    
  </body>

</html>


À ce stade je n'arrive pas à remplacer l'images "ON" par un <div> ..
..j'ai essayé ( sur --> codepen.io/pen <-- )

html 
<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
    var pic;
    if (sw == 0) {
        pic = "pic_bulboff.gif"
    } else {
        element.innerHTML = "<div id="red"> .css background #red </div>"
    }
    document.getElementById('myImage').src = pic;
}
</script>

<img id="myImage" src="pic_bulboff.gif" width="100" height="180">

<p>
<button type="button" onclick="light(1)">Light On</button>

</p>

</body>
</html>

css 

#red {
  background: red;
  width: 100%;
  height: 50px;
}

sans résultat .

..une idée svp pour pouvoir remplacer l'image "ON" ( 1er script ) par un div ( comme sur ma tentative raté du 2eme script ) ?


Ps : les images ne se charge pas sur codepen.io/pen ( normal ) mais on voit la zone quand même.




4 réponses

Réponse 1 / 4
jordane45 Messages postés 38306 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 novembre 2024 4 705
10 juin 2016 à 11:06
Bonjour

Comme je ne suis pas chien... je viens tout de même à ta rescousse...
cela étant dit :

En l'état actuel du code html ...c'est compliqué....

Le plus simple serait de placer ton image dans un conteneur (une div par exemple) 


<div id='un_id_de_ton_choix'>
  <img id="myImage" src="pic_bulboff.gif" width="100" height="180">
</div>


et donc... dans le code js : 
function light(sw) {
  if (sw == 0) {
     var  pic = "pic_bulboff.gif"
     document.getElementById('myImage').src = pic;
  } else {
     var divC = document.getElementById('un_id_de_ton_choix');
     divC.innerHTML = "<div id='red'> .css background #red </div>";
  }
}


0

Discussions similaires

2 boutons sur la même ligne
cs_philippe -
cs_philippe -

8 réponses
Cliquer sur un bouton pour faire apparaitre un paragraphe/image
Utilisateur anonyme -
nass6906 -

16 réponses
Afficher / masquer ou plier/déplier une zone de texte
langueyef -
Magwa -

12 réponses
afficher une image en cliquant sur un lien
cadprog -
cadprog -

3 réponses
créer lien "lire la suite" pour article trop long
zoro -
dugenou -

9 réponses
Création de bouton dynamique HTML/CSS (onclick)
koliddon -
gg77a -

2 réponses