Teclado virtual em javascript

30 de abril de 2011 6 respostas

junior_pepis 30 de abril de 2011

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

6 Respostas

leandronsp 30 de abr. de 2011

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

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

Espero ter ajudado!

junior_pepis 2 de mai. de 2011

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

leandronsp 2 de mai. de 2011

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…

junior_pepis 2 de mai. de 2011

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

junior_pepis 2 de mai. de 2011

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

leandronsp 3 de mai. de 2011

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

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.

Criado 30 de abril de 2011

Ultima resposta 3 de mai. de 2011

Respostas 6

Participantes 2

6 Respostas

Topicos relacionados