Javascript button click + reveal

Question

I have a big red button and I'm trying to use javascript to perform the following: -

1. OnMouseDown change image so the button looks depressed
2. OnMouseUp return to the initial image AND reveal a hidden div

I can get the onMouse Down and onMouseUp image changes part to work.

I can also get the hidden div to reveal by using OnClick

The problem is I can't get it all to work together.

How do I do this?

BTW, I'm sure its obvious, but I'm fairly new to javascript, so I appreciate your help

Answer 1

Without seeing your code, it's hard to say, but I suspect a missing 'return true;' statement at the end of either the onclick or onmouseup event handlers.

Answer 2

You can use semicolons to separate multiple script statements in an event:

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

Also, I believe most browsers support the onclick event:

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

Since you said you had already figured out each of the 3 parts separately, I just wrote function calls that you can replace with your own code for each step.

Answer 3

It's never recommended to attach events to elements using the attribute notation directly to an html element's tag.

It is a much better practice to seperate the view (being the rendered html) from the controller (the actions happening)

The best way to attach an event is like such:

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