Ao clicar no botão, alterar uma imagem

marcelomendesg · Maio 6, 2011

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

marcelomendesg · Maio 6, 2011

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";
            }            
        }

Entrar

Ao clicar no botão, alterar uma imagem

Pergunta

marcelomendesg

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

marcelomendesg

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades