Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Dacio35

Disparar um onclick com teclas especificas

Por , em Javascript

Recommended Posts

Dacio35    0

Dacio35
Postado

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 nao ha 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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito