Bouton on off sur div
Résolu
leito666
Messages postés
74
Date d'inscription
Statut
Membre
Dernière intervention
-
leito666 Messages postés 74 Date d'inscription Statut Membre Dernière intervention -
leito666 Messages postés 74 Date d'inscription Statut Membre Dernière intervention -
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 " ) :
À ce stade je n'arrive pas à remplacer l'images "ON" par un <div> ..
..j'ai essayé ( sur --> codepen.io/pen <-- )
html
css
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.
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
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)
et donc... dans le code js :
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>";
}
}
