Teclado virtual em javascript

Front-end
#1

aew eu estou fazendo um teclado virtual… já está pronto mas deu varias linhas de código… agora estou tentando diminuir as linhas de código…

por exemplo
nas teclas…

sao 3 imagens, uma normal, outra quando passar o mouse por cima… e outra… quando eu pressionar o mouse encima

ai sao 3 funcoes para cada tecla…
por exemplo a tecla B

<script type="text/javascript">
function trocaImagem1(){
	document.getElementById("b").src = "b1.gif";	
	
	
}

function trocaImagem2(){
	document.getElementById("b").src = "b.gif";
}

function trocaImagem3(){
document.getElementById("b").src="b2.gif";	
}



</script>

e no html

eu queria saber se tem como eu fazer… de forma mais simples sem ter que precisar fazer tantas funcoes…
pq o id de cada imagem é a letra
e todas elas sao asim… b, b1, b2, c, c1, c2 etc…

e se desse pra mim fazer uma funcao… e pega o id da imagem que eu cliquei…
e colocar em uma variavel e depois é só pegar uma variavel com uma string “1” e outra “2” asim formar o caminho da imagem a ser trocada
é possivel isso??
sou leigo em javascript arrecem estou começando a aparender

#2

você pode fazer apenas uma função, que recebe o source da imagem (b1.gif,c1,b2,etc), assim:

function trocaImagem(source){  
    document.getElementById("b").src = source;     
}

e:

img src="b.gif" id="b" onmouseover = "trocaImagem('b1.gif');" onmouseout = "trocaImagem('b.gif');" onmousedown="trocaImagem('b2.gif');"

Espero ter ajudado!

#3

cara muito bom… funciou legal mas no IE e no FireFox nao funcionou…
mas ja ajudou a diminuir o codigo bastante

#4

Pra funcionar em todos os browsesr, principalmente no problemático IE, terá que fazer algumas gambiarras no código.
Mas utilizar JQuery pode ajudar (nem sempre, na maioria das vezes) a fazer funcionar em todos os browsers.

Dá uma olhada em como usar o JQuery pra trocar o source da imagem nos eventos de mouseOver, mouseOut, etc…

#5

to vendo umas coisa em jquery na net… vou pesquisar isso… to vendo ums ligthbox…
cuida da uma olhada ai no forum eu fiz um post sobre um efeito que vi num site se vc souber o nome… agradeço

abraço

#6

se alguem souber o nome desse efeito

http://www.guj.com.br/java/240574-exibir-uma-imagem-quando-passar-o-mouse-por-cima-de-um-link

agradeço

#7

[quote=junior_pepis]se alguem souber o nome desse efeito

http://www.guj.com.br/java/240574-exibir-uma-imagem-quando-passar-o-mouse-por-cima-de-um-link

agradeço[/quote]
Essa efeito aí provavelmente é com lightbox. Mas…voce conseguiu capturar um evento com JQuery?
Voce pode fazer com mouseenter(), hover(), dependendo de como você quer que executa quando o mouse estiver focando ou saindo da imagem.
Dá uma olhada na documentacao do JQuery, é ótima e tem vários exemplos.

http://api.jquery.com/category/events/

Só vou te dar um exemplo, em como fazer o bind em um evento como o “click” do mouse, aí voce adapta para sua situacao com o evento adequado:

$("#idElement").click(function(event) {
   // Faz algo quando o click for efetuado no elemento 
});

Aí quando você capturar o evento com o JQuery, usa o lightbox pra mostrar a imagem maior com pop-up.

#8