2

eu estou estudando javascript e fiz um exercício onde tenho uma imagem de uma lâmpada apagada onde ao clicar ele troca a lâmpada colocando uma acesa, como se estivesse acendendo uma lâmpada, porém estou na dúvida não sei como fazer a mesma trocar a imagem para fazer o efeito de apagar novamente. Segue o código abaixo de como implementei.

<script>
    function ligar(){
        document.getElementById('lamp').src = "images/lampada-on.jpg";
    }
</script>

1
  • Por favor, marque uma das resposta com ✓. Não deixe a pergunta em aberto. MArque ✓ na resposta que resolveu seu problema.
    – Sam
    Commented 27/05/2018 às 6:16

5 Respostas 5

6

Você pode fazer desta forma

function ligarDesliga(){

    var imagem = document.getElementById('lamp').src;
    var imagem_ligado = 'https://www.w3schools.com/js/pic_bulbon.gif';
    var imagem_desligado = 'https://www.w3schools.com/js/pic_bulboff.gif';
    
    if(imagem == imagem_ligado){
    	document.getElementById('lamp').src = imagem_desligado;
    }else{
    	document.getElementById('lamp').src = imagem_ligado;
    }
}
document.getElementById("lamp").addEventListener("click", ligarDesliga);
#lamp{
  cursor: pointer;
  cursor: hand;
}
<img id="lamp" src="https://www.w3schools.com/js/pic_bulboff.gif">

HTML

<img id="lamp" src="images/lampada-off.jpg">

JavaScript

Isso é só para deixar o cursor da mesma forma de um link "maozinha", para o usuário entender que é possível clicar naquela imagem.

#lamp{
  cursor: pointer;
  cursor: hand;
}

JavaScript

function ligarDesliga(){

    var imagem = document.getElementById('lamp').src;
    var imagem_ligado = 'images/lampada-on.jpg';
    var imagem_desligado = 'images/lampada-off.jpg';

    if(imagem == imagem_ligado){
        document.getElementById('lamp').src = imagem_desligado;
    }else{
        document.getElementById('lamp').src = imagem_ligado;
    }
}
document.getElementById("lamp").addEventListener("click", ligarDesliga);

Criei um evento click para o id "lamp" e a função "ligarDesliga" verifica qual imagem esta presente na tag e a altera, fazendo o efeito de liga e desliga.

Update

Outro exemplo do w3 Tryjs Intro Lightbuld

7
  • 1
    Eu acho que fica melhor por como snippet do que referência externa... Commented 29/04/2018 às 21:40
  • Aproveitando, os soquetes das lâmpadas apagada e ligada são distintos xD Pode me chamar de louco, mas me chamou a atenção imediatamente quando eu vi Commented 29/04/2018 às 21:41
  • 1
    Agora a lampada esta feia, mas é a mesma rsrs. Commented 29/04/2018 às 21:45
  • 1
    Eu coloquei no próprio Snippet !!!
    – novic
    Commented 29/04/2018 às 23:48
  • 2
    Obrigado @VirgilioNovic, eu não sabia que este recurso se chamava Snippet, quando o "Jefferson" me falou isso, pesquisei aqui no google o significado e entendi que era outra coisa. Commented 29/04/2018 às 23:53
3

Let`s Go!

$('.cube-switch .switch').click(function() {
    if ($('.cube-switch').hasClass('active')) {
        $('.cube-switch').removeClass('active');
        $('#light-bulb2').css({'opacity': '0'});
    } else {
        $('.cube-switch').addClass('active');
        $('#light-bulb2').css({'opacity': '1'});
    }
});
body {
  background: rgb(70, 72, 75);
}

/* SWITCH */
.cube-switch {
    border-radius:10px;
    border:1px solid rgba(0,0,0,0.4);
    box-shadow: 0 0 8px rgba(0,0,0,0.6), inset 0 100px 50px rgba(255,255,255,0.1);
    /* Prevents clics on the back */
    cursor:default;    
    display: block;
    height: 100px;
    position: relative;
    margin: 5% 0px 0px 10%;
    overflow:hidden;
    /* Prevents clics on the back */
    pointer-events:none;
    width: 100px;
    white-space: nowrap;
    background:#333;
}

/* The switch */
.cube-switch .switch {
    border:1px solid rgba(0,0,0,0.6);
    border-radius:0.7em;
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -7px 0 rgba(0,0,0,0.2),
    inset 0 50px 10px rgba(0,0,0,0.2),
    0 1px 0 rgba(255,255,255,0.2);
    display:block;
    width: 60px;
    height: 60px;
    margin-left:-30px;
    margin-top:-30px;
    position:absolute;
    top: 50%;
    left: 50%;
    width: 60px;
 
    background:#666;
    transition: all 0.2s ease-out;

    /* Allows click */
    cursor:pointer;
    pointer-events:auto;
}

/* SWITCH Active State */
.cube-switch.active {
    /*background:#222;
    box-shadow:
    0 0 5px rgba(0,0,0,0.5),
    inset 0 50px 50px rgba(55,55,55,0.1);*/
}

.cube-switch.active .switch {
    background:#333;
    box-shadow:
    inset 0 6px 0 rgba(255,255,255,0.1),
    inset 0 7px 0 rgba(0,0,0,0.2),
    inset 0 -50px 10px rgba(0,0,0,0.1),
    0 1px 0 rgba(205,205,205,0.1);
}

.cube-switch.active:after,
.cube-switch.active:before {
    background:#333; 
    box-shadow:
    0 1px 0 rgba(255,255,255,0.1),
    inset 1px 2px 1px rgba(0,0,0,0.5),
    inset 3px 6px 2px rgba(200,200,200,0.1),
    inset -1px -2px 1px rgba(0,0,0,0.3);
}

.cube-switch.active .switch:after,
.cube-switch.active .switch:before {
    background:#222;
    border:none;
    margin-top:0;
    height:1px;
}

.cube-switch .switch-state {
    display: block;
    position: absolute;
    left: 40%;
    color: #FFF;

    font-size: .5em;
    text-align: center;
}

/* SWITCH On State */
.cube-switch .switch-state.on {
    bottom: 15%;
}

/* SWITCH Off State */
.cube-switch .switch-state.off {
    top: 15%;
}

#light-bulb2 {
width: 150px;
height: 150px;
background: url(https://lh4.googleusercontent.com/-katLGTSCm2Q/UJC0_N7XCrI/AAAAAAAABq0/6GxNfNW-Ra4/s300/lightbulb.png) no-repeat 0 0;
}

#light-bulb {
position: absolute;
width: 150px;
height: 150px;
top: 5%;
left: 40%;
background: url(https://lh4.googleusercontent.com/-katLGTSCm2Q/UJC0_N7XCrI/AAAAAAAABq0/6GxNfNW-Ra4/s300/lightbulb.png) no-repeat -150px 0;
cursor: move;
z-index: 800;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div href="" class="cube-switch">
        <span class="switch">
            <span class="switch-state off">Off</span>
            <span class="switch-state on">On</span>
        </span>
</div>
<div id="light-bulb" class="off ui-draggable" ><div id="light-bulb2" style="opacity: 0; "></div></div>

1

Acredito que isso faça o que você precisa:

function liga_desliga(){

    const lamp = document.querySelector('#lamp');

    var src = ['lampada-on.jpg','lampada-off.jpg']
        .filter((value) => {
            var a = lamp.src.match(/\/(lampada-.+)/i)[1];
            return value != a;
        })[0];
    lamp.src = `images/${src}`;

}
2
  • Fazer só com CSS é uma opção para vc ou como vc está estudando tem que ser com Script mesmo?
    – hugocsl
    Commented 30/04/2018 às 19:53
  • Eu estou estudando javascript mesmo puro e não jQuery
    – Arisson
    Commented 1/05/2018 às 14:31
1

Você pode fazer um código parecido com o meu para alterar a imagem da lâmpada.

<script>

    var atual_state = 'DESLIGADA';

    function mudaEstado() {
        atual_state === 'DESLIGADA' ? atual_state = 'LIGADA' : atual_state = 'DESLIGADA';
        return atual_state;
    }

    function ligaDesliga() {

        if (atual_state === 'DESLIGADA')
            document.getElementById('lampada').src = 'ligada.jpg';
        else
            document.getElementById('lampada').src = 'desligada.jpg';


        mudaEstado();

    }
</script>

<button onclick="ligaDesliga()"></button>
<img id="lampada" src="desligada.jpg">
1

Uma forma bem simples e enxuta de fazer isso:

function ligarApagar(e){
   e.src = "images/lampada-"+( ~e.src.indexOf("-on") ? "off" : "on" )+".jpg";
   
   // daqui pra baixo é apenas exemplo para mostrar o texto
   // pode apagar
   document.querySelector("b").textContent = e.src;
   
}
<img height="100" id="lamp" src="images/lampada-on.jpg">
<b> https://stacksnippets.net/images/lampada-on.jpg </b>
<br>
<button type="button" id="controle" onclick="ligarApagar(document.getElementById('lamp'))">Ligar/Apagar</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .