Pesquisar na Comunidade
Mostrando resultados para as tags ''.click''.
Encontrado 1 registro
-
Olá pessoal, tenho uma dúvida e gostaria de saber se alguém tem uma noção de como saná-la. Estou fazendo um trabalho para faculdade e preciso que através de teclas do teclados, por exemplo uma tecla especifica "a" seja disparado um onclick para que através disso seja trocada uma imagem por outra específica, no caso simularia o acendimento de uma lampada trocando a imagem de uma lampada apagada por outra lampada acesa ao apertar essa tecla "a", por exemplo. O grande problema é esse, fazer isso acontecer com o teclado, pois com o mouse já consegui fazer mas não ajuda muito. Se alguém tiver alguma dica faça comentário, por favor. A linguagem utilizada é javascript, mas estou aberto a novas ideias. Andei pesquisando sobre a biblioteca jquery,mas ainda não há um codigo satisfatorio. <!DOCTYPE html> <html lang="PT-BR"> <head> <body> <meta charset ="UTF-8"> <style> .on { padding: 9px 15px; width: 85px; height: 40px; font-family: arial; font-size:medium; font-weight: bold; background-color: #aad450; box-shadow: inset 0 1px 1px #fff, 0 2px 3px #666; border-style:groove; cursor:pointer; } .off { padding: 9px 15px; width: 100px; font-family: arial; font-size:medium; font-weight: bold; margin-right: 55px; background-color: #fc6; box-shadow: inset 0 1px 10px #fff, 0 2px 30px #666; border-style:groove; cursor:pointer; } </style> <title>Acionamento de Lâmpadas</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> function mudaimg(){ elem = document.getElementById("imgvolume").src = "http://i.imgur.com/pDfTeZW.png"; } function mudaimge(){ elem = document.getElementById("imgvolume").src = "http://i.imgur.com/dZZb6iQ.png"; } $(document).bind('keydown','a', function(e) { $("#imgvolume").trigger('click'); }); // Definir clique $("#imgvolume").click(function mudaimg(){ }); </script> <h1><center><font face="Arial" color="green" SIZE="10">Teste de iluminação</font></center></h1> <TABLE align='center'> <TR><TD><img src="http://i.imgur.com/dZZb6iQ.png" id="imgvolume"></br></TD> </TR> </TABLE align='center'> <TABLE align='center'> <TR><TD><br><a href="#"><span class="on"onclick="mudaimg()">on</span></a> <a href="#"><span class="off"onClick="mudaimge()">off</span></a></TD> </TR> </TABLE align='center'> </body> </html>
