Javascript clique de botão + revelar

Question

Eu tenho um grande botão vermelho e eu estou tentando usar javascript para executar o seguinte: -

1. imagem mudança OnMouseDown assim o botão de aparência deprimida
2. OnMouseUp retorno para a imagem inicial e revelam um div
escondida

Eu posso obter a imagem onMouse Down e onMouseUp muda parte ao trabalho.

Eu também pode obter a div oculta para revelar usando OnClick

O problema é que não pode obter tudo isso para trabalhar em conjunto.

Como posso fazer isso?

BTW, eu tenho certeza que é óbvio, mas eu sou bastante novo para javascript, então eu aprecio sua ajuda

Answer 1

Você pode usar ponto e vírgula para separar várias instruções de script em um evento:

<img src="..." alt="..."
  onmousedown="depressed();"
  onmouseup="undepressed(); revealDiv();" />

Além disso, eu acredito que a maioria dos navegadores apoiar o evento onclick:

<img src="..." alt="..."
  onmousedown="depressed();"
  onmouseup="undepressed();"
  onclick="revealDiv();" />

Uma vez que você disse que já tinha descoberto cada uma das 3 partes separadamente, eu só escrevi chamadas de função que você pode substituir com seu próprio código para cada etapa.

Answer 2

Sem ver seu código, é difícil dizer, mas eu suspeitar de uma falta 'return true;' declaração no final de ambos os manipuladores de evento onclick ou OnMouseUp.

Answer 3

não é recomendado para anexar eventos a elementos usando a notação atributo diretamente a tag de um elemento HTML.

É um muito melhor prática para separar a visão (sendo o processado HTML) a partir do controlador (as ações acontecendo)

A melhor maneira de anexar um evento é como tal:

<img id="abut" />

<script>
var thebutton = document.getElementById('abut'); //Retrieve the button from the page 
thebutton.onmousedown = depressed; //depressed is a function that you declare earlier on...here, you are just passing a reference to it
thebutton.onmouseup = function () {
    undepressed();
    revealDiv(); //Invoke the two functions when the 'onmouseup' is triggered'
};
</script>