I have 3 created button states per navigation menu button. I already have working code for the standard button, and the hover, but I cannot figure out how to change my code for the on click picture (The third transformation).

So I want 3 states: One picture standard, another picture on hover, and the third picture shows on click.

Here is a page that has the 2 stages of the naviation buttons already: http://www.dayton-web-design.com/

I would like to show the code for the first 2 of 7 buttons so that maybe you can help. This is what I was told to put between the head tags:
Code:
<!-- Begin

image1 = new Image();
image1.src = "images/nhome_hover.png";

image2 = new Image();
image2.src = "images/ndesign_philosophy_hover.png";
// End -->
</script>
And where I want the first and second buttons this is the code I have in body part of the website:
Code:
  <tr>
    <th scope="row"><a onmouseover="image1.src='images/nhome_hover.png';" onmouseout="image1.src='images/nhome.png';" href="http://www.dayton-web-design.com/">
<img name="image1" src="images/nhome.png" border=0></a></th>
  </tr>
  <tr>
    <th scope="row"><a onmouseover="image2.src='images/ndesign_philosophy_hover.png';" onmouseout="image2.src='images/ndesign_philosophy.png';" href="http://www.dayton-web-design.com/">
<img name="image2" src="images/ndesign_philosophy.png" border=0></a></th>
  </tr>
I have tried to change the onmouseout image located above in the body tag to my third state buttons which is what I want it to change to when clicked. This is what my image names are for the third state:
nhome_onclick.png and ndesign_philosophy_onclick.png

I also tried to add extra definitions in the head tags for the onclick buttons and that did not work.

Any help would be greatly appreciated. As I stated earlier I don't know Javascript but would really love to have all 3 states to my buttons. Learning would be a nice bonus as well. I am thinking this is an easy fix, but I keep messing up the code and nothing is working for me.