Ir para conteúdo
Fórum Script Brasil

marcelomendesg

Membros
 Perfil  Explorar Conteúdo

  • Total de itens

    2

  • Registro em

  • Última visita

 Tipo de Conteúdo 

Tudo que marcelomendesg postou

  1. marcelomendesg
    Problema resolvido Resolução: chamar a imagem na tabela assim: <img src="apagado.gif" id="imagem"> e modificar a função caps para: function caps() { if(flag == false) { flag = true; imagem = document.getElementById("imagem"); imagem.src = "verde.gif"; } else { flag = false; imagem = document.getElementById("imagem"); imagem.src = "apagado.gif"; } }
  2. marcelomendesg
    Olá Pessoal, Estou com o seguinte problema: Fiz um teclado virtual para um projeto, está funcionando direitinho, mas agora queria colocar algo a mais. Seria uma espécie de "led" que fica ao lado do botão CAPS LOCK, para indicar se ele está ligado ou não. Gostaria de saber como eu posso mudar o source da imagem com alguma função javascript. Pesquisei bastante e vi algo sobre o getElementById, mas não estou entendendo muito bem o funcionamento. O source dele desligado é apagado.jpg, e o ligado é ligado.jpg. Segue o código do teclado inteiro. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Teclado Virtual</title> </head> <body onLoad="document.Teclado.usuario.focus()" bgcolor="#FFEBC1"> <style> INPUT.botao { width: 60px; height: 40px; font-family: verdana; font-size:medium; background-color: #FC6; border-style:groove; } INPUT.backspace { width: 120px; height: 35px; font-family: verdana; font-size:small; background-color: #FC6; border-style:groove; } INPUT.espaco { width: 400px; height: 35px; font-family: verdana; font-size:medium; background-color: #FC6; border-style:groove; } INPUT.limpar { width: 60px; height: 40px; font-family: verdana; font-size:small; background-color: #FC6; border-style:groove; } INPUT.caps { width: 85px; height: 40px; font-family: verdana; font-size:medium; background-color: #FC6; border-style:groove; } </style> &lt;script type="text/javascript"> var foco; var flag; flag = false; function envia(tecla){ if(flag == true) { tecla = tecla.toUpperCase(); } if(foco == "user") { document.Teclado.usuario.value = document.Teclado.usuario.value + tecla; } if(foco == "pass") { document.Teclado.senha.value = document.Teclado.senha.value + tecla; } } function foco_user() { foco = "user"; } function foco_pass() { foco = "pass"; } function limpa() { if(foco == "user") { document.Teclado.usuario.value= ""; } if(foco == "pass") { document.Teclado.senha.value = ""; } } function tamanho() { var tamanho; var stringini; var stringfin; if(foco == "user") { tamanho = document.Teclado.usuario.value.length; stringini = document.Teclado.usuario.value; stringfin = stringini.substr(0,(tamanho - 1)); document.Teclado.usuario.value = stringfin; } if(foco == "pass") { tamanho = document.Teclado.senha.value.length; stringini = document.Teclado.senha.value; stringfin = stringini.substr(0,(tamanho - 1)); document.Teclado.senha.value = stringfin; } } function caps() { if(flag == false) { flag = true; } else { flag = false; } } </script> <form name = "Teclado"> <table border ="0" cellspacing=0 cellpadding=2 align="center"> <tr><td>Usuário: <td colspan="9"><input type="text" name="usuario" size="40" onfocus="foco_user()"> </tr> <tr><td>Senha: <td colspan="9"><input type="password" name="senha" size="15" onfocus="foco_pass()"> </tr> </table> <br> <table border="1" cellspacing=0 cellpadding=4 align="center"> <tr align="center"> <td><INPUT TYPE="button" NAME="um" VALUE=" 1 " onClick="envia('1')" class="botao"></td> <td><INPUT TYPE="button" NAME="dois" VALUE=" 2 " onClick="envia('2')" class="botao"></td> <td><INPUT TYPE="button" NAME="tres" VALUE=" 3 " onClick="envia('3')" class="botao"></td> <td><INPUT TYPE="button" NAME="quatro" VALUE=" 4 " onClick="envia('4')" class="botao"></td> <td><INPUT TYPE="button" NAME="cinco" VALUE=" 5 " onClick="envia('5')" class="botao"></td> <td><INPUT TYPE="button" NAME="seis" VALUE=" 6 " onClick="envia('6')" class="botao"></td> <td><INPUT TYPE="button" NAME="sete" VALUE=" 7 " onClick="envia('7')" class="botao"></td> <td><INPUT TYPE="button" NAME="oito" VALUE=" 8 " onClick="envia('8')" class="botao"></td> <td><INPUT TYPE="button" NAME="nove" VALUE=" 9 " onClick="envia('9')" class="botao"></td> <td><INPUT TYPE="button" NAME="zero" VALUE=" 0 " onClick="envia('0')" class="botao"></td> </tr> <tr align="center"> <td><INPUT TYPE="button" NAME="q" VALUE=" Q " onClick="envia('q')" class="botao"></td> <td><INPUT TYPE="button" NAME="w" VALUE=" W " onClick="envia('w')" class="botao"></td> <td><INPUT TYPE="button" NAME="e" VALUE=" E " onClick="envia('e')" class="botao"></td> <td><INPUT TYPE="button" NAME="r" VALUE=" R " onClick="envia('r')" class="botao"></td> <td><INPUT TYPE="button" NAME="t" VALUE=" T " onClick="envia('t')" class="botao"></td> <td><INPUT TYPE="button" NAME="y" VALUE=" Y " onClick="envia('y')" class="botao"></td> <td><INPUT TYPE="button" NAME="u" VALUE=" U " onClick="envia('u')" class="botao"></td> <td><INPUT TYPE="button" NAME="i" VALUE=" I " onClick="envia('i')" class="botao"></td> <td><INPUT TYPE="button" NAME="o" VALUE=" O " onClick="envia('o')" class="botao"></td> <td><INPUT TYPE="button" NAME="p" VALUE=" P " onClick="envia('p')" class="botao"></td> </tr> <tr align="center"> <td><INPUT TYPE="button" NAME="a" VALUE=" A " onClick="envia('a')" class="botao"></td> <td><INPUT TYPE="button" NAME="s" VALUE=" S " onClick="envia('s')" class="botao"></td> <td><INPUT TYPE="button" NAME="d" VALUE=" D " onClick="envia('d')" class="botao"></td> <td><INPUT TYPE="button" NAME="f" VALUE=" F " onClick="envia('f')" class="botao"></td> <td><INPUT TYPE="button" NAME="g" VALUE=" G " onClick="envia('g')" class="botao"></td> <td><INPUT TYPE="button" NAME="h" VALUE=" H " onClick="envia('h')" class="botao"></td> <td><INPUT TYPE="button" NAME="j" VALUE=" J " onClick="envia('j')" class="botao"></td> <td><INPUT TYPE="button" NAME="k" VALUE=" K " onClick="envia('k')" class="botao"></td> <td><INPUT TYPE="button" NAME="l" VALUE=" L " onClick="envia('l')" class="botao"></td> <td><INPUT TYPE="button" NAME="ç" VALUE=" Ç " onClick="envia('ç')" class="botao"></td> </tr> <tr align="center"> <td><INPUT TYPE="button" NAME="z" VALUE=" Z " onClick="envia('z')" class="botao"></td> <td><INPUT TYPE="button" NAME="x" VALUE=" X " onClick="envia('x')" class="botao"></td> <td><INPUT TYPE="button" NAME="c" VALUE=" C " onClick="envia('c')" class="botao"></td> <td><INPUT TYPE="button" NAME="v" VALUE=" V " onClick="envia('v')" class="botao"></td> <td><INPUT TYPE="button" NAME="b" VALUE=" B " onClick="envia('b')" class="botao"></td> <td><INPUT TYPE="button" NAME="n" VALUE=" N " onClick="envia('n')" class="botao"></td> <td><INPUT TYPE="button" NAME="m" VALUE=" M " onClick="envia('m')" class="botao"></td> <td><INPUT TYPE="button" NAME="." VALUE=" . " onClick="envia('.')" class="botao"></td> <td colspan="2"><INPUT TYPE="button" NAME="Caps Lock" VALUE="CAPS" onClick="caps()" class="caps"> <img src="apagado.gif" id="imagem"> </td> </tr> <tr align="center"> <td><INPUT TYPE="button" NAME="limpar" VALUE="Limpar" onClick="limpa()" class="limpar"> <td><INPUT TYPE="button" NAME="," VALUE=" , " onClick="envia(',')" class="botao"></td> <td colspan="6"><INPUT TYPE="button" NAME="space" VALUE=" " onClick="envia(' ')" class="espaco"></td> <td colspan="2"><INPUT TYPE="button" NAME="backspace" VALUE="Backspace" onclick="tamanho()" class="backspace"></td> </tr> </table> </form> </body> </html> Eu acho que dá pra colocar esse possível código dentro da função caps(), já que é ela que está controlando o funcionamento das maiúsculas, e ficaria atrelada ao controle da imagem também. Obrigado
×
×
  • Criar Novo...