Bouton on off sur div

Résolu/Fermé

Html

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.

A voir également:

Bouton on off html
Bouton on off ✓ - Forum Loisirs / Divertissements
@Echo off ✓ - Forum Autoit / batch
Bouton shift pc ✓ - Forum Windows
On off symbole ✓ - Forum Matériel & Système
Symbole arrêt marche - Forum Word

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
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>";
  }
}

Réponse 2 / 4

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 à 23:50

Bonsoir et " WouuOuF " à tout les chiens d'la casse

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

..? la "base" est identique à la démo de --> w3schools.com

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

_< ..une idée svp pour pouvoir remplacer l'image "ON" ( 1er script ) par un div >

(..espera..espera)

oui le script permet d'afficher le div ( à la place de l'image "ON" ) Mais il reste affiché après 2eme clique sur le bouton ...
contrairement avec mon script où l'image "ON" ne reste pas

La bonne nouvelle est que grâce à ton script j''ai réussi ( Merci . )

( à tester sur ---> codepen.io/pen )
HTML

<html>

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

  function incNumber() {
    if (i < 1) {
      i++;
      var divC = document.getElementById('un_id_de_ton_choix');
      divC.innerHTML = "<div id='red'>Js #red div .css</div>";
                
    } else if (i = 2) {
      i = 0;
      var divC = document.getElementById('un_id_de_ton_choix');
      divC.innerHTML = "<div id='none'></div>";
    }
  }
                
  </script>
    
    <button type="button" value="Increase" id="inc" onclick="incNumber(1)">on / off</button>
    
    <div id='un_id_de_ton_choix'>
    </div>
    
  </body>

</html>

CSS

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

#none {
  display: none;
}

Un bouton " on/off " pour <div id=""> avec Js
( et sans images car elles n'ont rien à voir avec le titre )
Sujet RÉSOLU :)

Mais ouvert à tout script pouvant l'améliorer, le rectifier, .....etc

Bonne soirée

Discussions similaires

2 boutons sur la même ligne

Cliquer sur un bouton pour faire apparaitre un paragraphe/image

Afficher / masquer ou plier/déplier une zone de texte

afficher une image en cliquant sur un lien

créer lien "lire la suite" pour article trop long

Création de bouton dynamique HTML/CSS (onclick)

Discussions similaires

Newsletters