Javascript + clic de botón revelar

Question

Tengo un gran botón rojo y estoy tratando de usar javascript para realizar lo siguiente: -

1. onMouseDown cambiar la imagen por lo que el botón se ve presionado
2. onmouseup volver a la imagen inicial y revelan un div ocultas

puedo conseguir el onMouse de Down y la imagen cambia onMouseUp parte al trabajo.

También puedo conseguir el div oculto para revelar mediante el uso de OnClick

El problema es que no puedo conseguir que todos a trabajar juntos.

¿Cómo se hace esto?

Por cierto, estoy seguro de que es obvio, pero soy bastante nuevo en Javascript, así que aprecio su ayuda

Answer 1

Puede usar punto y coma para separar varias sentencias de script en un evento:

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

Además, creo que la mayoría de los navegadores soportan el evento onclick:

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

Dado que usted ha dicho que ya había dado cuenta de cada una de las 3 partes por separado, que acabo de escribir llamadas de función que se puede sustituir con su propio código para cada paso.

Answer 2

Sin ver su código, es difícil de decir, pero sospecho una falta 'return true;' declaración al final de cualquiera de los onclick o controladores de eventos onMouseUp.

Answer 3

Nunca es recomendable adjuntar eventos a elementos usando la notación de atributos directamente a la etiqueta de un elemento HTML.

Es un mucho mejor práctica para separar la vista (siendo el HTML representado) desde el controlador (las acciones sucediendo)

La mejor manera de unir un evento es como por ejemplo:

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