Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Rodrigo Zambrano

efeito acende, apaga e quebra lâmpada com javascript

Recommended Posts

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!!

Editado por Rodrigo Zambrano

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  •  

     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! :D Abração

    Editado por DiF
    Retificar seu post, porque o post anterior foi apagado.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @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? 

    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • @DiF eu me confundi. Sim, o terceiro estado é ela quebrada. Vou dar uma organizada no código e mando aqui. Obrigado! Abraço

    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • @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>        
            

     

    Editado por DiF
    Botão CODE <>
    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @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!

    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário






    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×