Clever Geek Handbook

Javascript button click + expand

I have a big red button and I am trying to use javascript to do the following: -

  • OnMouseDown, change the image to make the button appear pressed.
  • OnMouseUp will revert back to original image AND show hidden div

I can get information about file changes onMouse Down and onMouseUp.

I can also open hidden div using OnClick

The problem is, I can't get everything to work together.

How to do it?

By the way, I'm sure this is obvious, but I'm pretty new to javascript, so I appreciate your help.

+1


source to share


3 answers


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 already figured out each of the three parts separately, I just wrote function calls that you can replace with your own code for each step.

+1


source


Without seeing my code, it's hard to tell, but I suspect the "return true" is missing; at the end of the onclick or onmouseup event handlers.



0


source


It's never a good idea to attach events to elements using attribute notation directly to the html element tag.

It is a better practice to separate the view (which is the rendered html) from the controller (the actions being taken)

The best way to attach an event is like this:

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


source






More articles:


All Articles