Second JS button triggers first JS button

Question

I know I have to be doing something wrong, but again I don't fully understand what I'm doing as it is. I'm creating a form which will have multiple buttons linked to JavaScript functions to do stuff. I'm at the very basic point of having these two buttons on the same page, and when you onMouseOver, onMouseDown, onMouseUp, onMouseOut it changes the image of my button.

I know there are other ways to do this (better ways) but I'm trudging on in this direction to at least get a better understanding of how JavaScript works. I know I'll have somewhat more complicated things to do down the road that may require something like this and I want to be sure I understand it when I get there.

The problem I'm having is that the second button does not do anything when you try to use it. The first button works fine, but the second button doesn't And when you try to use the second button, it makes the first one go off. So if I onMouseOver button 2, button 1 will show the affect. I tried copying my image files into a new set so they aren't using the same images, but that just showed me what when I use button 2, the functions set up for button 2 are being applied to button 1.

Anyway, here's the HTML code....

<input type="hidden"  value="0" id="theValue"  /> 
<p><a  href="javascript:addElement()"  ><img id="button" onMouseOver="hover_over()"
onMouseOut="hover_off()"  onMouseDown="click_add()" onMouseUp="release()"   
src="images/add_default.png" name="add" width="43" height="21"></a></p>


<input type="hidden"  value="0" id="theValue2"  /> 
<p><a href="javascript:addProduct()"  ><img id="button2"  
onMouseOver="hover_over_second()" onMouseOut="hover_off_second()" 
onMouseDown="click_add_second()" onMouseUp="release_second()"  
src="images/add_default2.png" name="add2" width="43" height="21"></a></p>

And here is the JavaScript....

////
//----------------Button Animation 1-------------------
////

function hover_off() {
document.images.add.src='images/add_default.png';   
}

function hover_over() {
document.images.add.src='images/add_hover.png';
}

function click_add() {
document.images.add.src='images/add_click.png';
}

function release() {
document.images.add.src='images/add_hover.png';
}
////
//---------------------------------------------------
////

////
//----------------Button Animation 2-------------------
////
function hover_off_second() {
document.images.add.src='images/add_default2.png';

}
function hover_over_second() {
document.images.add.src='images/add_hover2.png';
}
function click_add_second() {
document.images.add.src='images/add_click2.png';
}
function release_second() {
document.images.add.src='images/add_hover2.png';
}
////
//---------------------------------------------------
////

What am I doing wrong here? How do I get these links to actually work separately from each other?

Please teach me wise ones. I know this has to be stupid simple.

Answer 1

You are targetting the same element in your second button handler, it should be add2 not add like the first one that's why the first element src attribute is changed instead of the other.

function hover_off_second() {
document.images.add2.src='images/add_default2.png';
}
function hover_over_second() {
document.images.add2.src='images/add_hover2.png';
}
function click_add_second() {
document.images.add2.src='images/add_click2.png';
}
function release_second() {
document.images.add2.src='images/add_hover2.png';
}