efeito acende, apaga e quebra lâmpada com javascript

Rodrigo Zambrano · 17 de fevereiro de 2017

Meu problema é o seguinte. Quero fazer o seguinte efeito. Tenho imagem de 03 lâmpadas apagadas, uma do lado da outra. Quando passo o mouse por cima da lâmpada 01 ela acende. Quando passo o mouse por cima da lâmpada 02, ela acende e deixa a lâmpada 01 ainda acessa. Quando passo para a lâmpada 03 ela acende e deixa as lâmpadas 01 e 02 acessas também. Quando tiro o mouse das lâmpadas elas apagam, as 03. Até aí eu fiz usando javascript ("getElementById" e trocando as fotos. O que quero fazer agora é quando clicar na lâmpada 01 ela quebrar e as outras duas apagam, quando clicar na lâmpada 02, a lâmpada 01 e 02 quebram e a terceira se apaga (ou mantem apagada). E quando clicar na lâmpada 03, as 03 quebram. E depois que uma lâmpada é quebrada nada mais pode ser feito. O efeito chega ao fim, seja quebrando a lâmpada 01, 02 ou 03. Alguém pode me ajudar? Consigo fazer isso usando JavaScript. Meus arquivos já estão preparados por lampada_acessa / lampada_apagada / lampada_quebrada. Obrigado!!

DiF · 17 de fevereiro de 2017

@Rodrigo Zambrano Olá, seja bem vindo em nosso Clube do Hardware.

Você pode fazer tudo isso com javascript... se quiser ter uma melhor ajuda, poste suas imagens e o código javascript.

Rodrigo Zambrano · 22 de fevereiro de 2017

A dificuldade é quando clicar no quadrado 01, fica acesso e os outros apagados. Quando clicar no 02 fica o 01 e 02 acessos e o 03 apagado. E quando clicar no 03, fica os 03 acessos, 01, 02 e 03. E nada muda mais depois de cada click. Fecharia a função javascript. @DiF, será que não consegue nos ajudar? Muito obrigado mais uma vez! Abração

DiF · 22 de fevereiro de 2017

@Rodrigo Zambrano Sim, podemos ajudar, mas você precisa postar a sua tentativa de código( não a copiada do post anterior)

Precisamos que você poste seu andamento, a sua lógica e etc.

De inicio eu questiono o seguinte:

No primeiro post, você informa que sua lampada tem 3 estados. Apagada, acesa e quebrada.

O estado inicial é apagado. Quando clica uma vez na lampada 1, ela acende, quando clica na lampada 1 de novo ela quebra. Se a 1 quebrar antes dos outros, quando clicar no 2, a lampada 1 não poderá ser acesa pois está quebrada. e assim por diante até quebrar as tres.

Agora no seu segundo post você abandonou a ideia de quebrar?

Rodrigo Zambrano · 24 de fevereiro de 2017

@DiF eu me confundi. Sim, o terceiro estado é ela quebrada. Vou dar uma organizada no código e mando aqui. Obrigado! Abraço

Rodrigo Zambrano · 6 de março de 2017

@DiF, mudei meu exercício de aprendizado e ao invés de fazer as luzes acenderem, apagarem e quebrarem eu estou tentando simplificar (ou não..hehe) e fazer um ranking de estrelas. Porém também, ao escrever o código parei no mesmo ponto das luzes, onde depois de clicar gostaria que ficasse tudo estático, ou seja, se clico em 3 estrelas, permanece 3 estrelas, se pontuo 2, 5 estrelas, para também em 2,5. E não volta mais. Segue meu código abaixo. Pode me ajudar com este exercício? Explicando melhor, fiz 10 arquivos, 10 metades de estrelas. Ex: metadeesquerda1.png, metadedireita1.png...etc...)

<!DOCTYPE html>
<html lang="pt-br">
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/estrelas.css">
        <script>
           function marcaMeioPonto(){
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        
        <script>
           function marcaUmPonto(){
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaUmPontoEmeio(){
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaDoisPontos(){
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaDoisPontosEmeio(){
             document.getElementById("metadeesquerda3").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaTresPontos(){
             document.getElementById("metadedireita3").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda3").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaTresPontosEmeio(){
             document.getElementById("metadeesquerda4").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita3").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda3").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaQuatroPontos(){
             document.getElementById("metadedireita4").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda4").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita3").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda3").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaQuatroPontosEmeio(){
             document.getElementById("metadeesquerda5").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita4").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda4").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita3").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda3").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaCincoPontos(){
             document.getElementById("metadedireita5").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda5").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita4").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda4").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita3").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda3").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
          
           function limpaestrelas(){
                                     

                     document.getElementById("metadedireita5").src = "img/estrela-vazia-metadedireita5.png";
             document.getElementById("metadeesquerda5").src = "img/estrela-vazia-metadeesquerda5.png";
             document.getElementById("metadedireita4").src = "img/estrela-vazia-metadedireita4.png";
             document.getElementById("metadeesquerda4").src = "img/estrela-vazia-metadeesquerda4.png";
             document.getElementById("metadedireita3").src = "img/estrela-vazia-metadedireita3.png";
             document.getElementById("metadeesquerda3").src = "img/estrela-vazia-metadeesquerda3.png";
             document.getElementById("metadedireita2").src = "img/estrela-vazia-metadedireita2.png";
             document.getElementById("metadeesquerda2").src = "img/estrela-vazia-metadeesquerda2.png";
             document.getElementById("metadedireita1").src = "img/estrela-vazia-metadedireita1.png";
             document.getElementById("metadeesquerda1").src = "img/estrela-vazia-metadeesquerda1.png";
           
                     
           }
        </script>
        <script>
          
            function fixaestrela(){
                
                    
                                   
            }
        </script>
        
        
        
      </head>
        
        <body>
             <div class="star">     
                 <article class="stars">
                    <img src="img/estrela-vazia-metadeesquerda1.png" id="metadeesquerda1" onmousemove="marcaMeioPonto()" onmouseout="limpaestrelas()" onclick="fixaestrela()"/>
                    <img src="img/estrela-vazia-metadedireita1.png" id="metadedireita1" onmousemove="marcaUmPonto()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadeesquerda2.png" id="metadeesquerda2" onmousemove="marcaUmPontoEmeio()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadedireita2.png" id="metadedireita2" onmousemove="marcaDoisPontos()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadeesquerda3.png" id="metadeesquerda3" onmousemove="marcaDoisPontosEmeio()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadedireita3.png" id="metadedireita3" onmousemove="marcaTresPontos()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadeesquerda4.png" id="metadeesquerda4" onmousemove="marcaTresPontosEmeio()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadedireita4.png" id="metadedireita4" onmousemove="marcaQuatroPontos()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadeesquerda5.png" id="metadeesquerda5" onmousemove="marcaQuatroPontosEmeio()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadedireita5.png" id="metadedireita5" onmousemove="marcaCincoPontos()" onmouseout="limpaestrelas()"/>
            
                 <article>
             </div>        
        
        
        
        
        </body>
</html>

DiF · 6 de março de 2017

@Rodrigo Zambrano Sei que você está tentando aprender e tal.. mas este não é bom para exercício. Não desta forma. Não vai conseguir atingir o efeito desejado assim. Você precisa criar um código javascript que manipule o evento e o elemento. O código seria extenso demais fazendo em javascript puro como quer.

Para isso, como aprendizado, eu sugiro que você estude direto o jQuery, que é o javascript de forma mais simples e existe aos montes plugins para rating de votação com estrela.

Na verdade é bem fácil com ele veja uns exemplos que possuem explicações de como usar:

http://rateyo.fundoocode.ninja/

https://github.com/irfan/jquery-star-rating

http://irfandurmus.com/projects/jquery-star-rating-plugin/

http://antenna.io/demo/jquery-bar-rating/examples/

Na minha opinião pessoal, mais vai beneficiar você, e forçar a entender como funciona. Foi assim que aprendi!