두 번째 JS 버튼이 첫 번째 JS 버튼을 트리거합니다.

Question

제가 잘못 생각하고 있어야한다는 것을 알고 있지만, 다시는 제가하는 일을 완전히 이해하지 못합니다. JavaScript 함수에 링크 된 여러 버튼이있는 양식을 만들고 있습니다. 나는 같은 페이지에이 두 개의 단추가있는 아주 기본적인 시점에 있으며, onMouseOver, onMouseDown, onMouseUp, onMouseOut 단추의 이미지를 변경합니다.

다른 방법 (더 좋은 방법이 있습니다)이 있지만 JavaScript가 작동하는 방법을 더 잘 이해하려면이 방향으로 돌입니다. 나는 길 아래로 할 일이 좀 더 복잡해지기 때문에이 같은 것을 요구할 수도 있다는 것을 알고 있으며 내가 거기 도착했을 때 나는 그것을 이해하고 싶다.

내가 사용하고있는 문제는 두 번째 버튼이 사용하려고 할 때 아무 것도하지 않는다는 것입니다. 첫 번째 버튼은 잘 작동하지만 두 번째 버튼은 그렇지 않습니다. 두 번째 버튼을 사용하려고하면 첫 번째 버튼이 사라집니다. 따라서 onMouseOver 버튼 2, 버튼 1이 영향을 표시합니다. 내 이미지 파일을 새로운 세트로 복사하여 동일한 이미지를 사용하지 않도록 시도했지만 버튼 2를 사용할 때 버튼 2에 설정된 기능이 버튼 1에 적용되는 것을 보여주었습니다.

어쨌든, 여기

//// 
//----------------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'; 
} 
//// 
//--------------------------------------------------- 
//// 

내가 잘못 여기서 뭐하는 거지 .... ....

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

를 HTML 코드입니다 그리고 여기 자바 스크립트는? 이 링크를 실제로 어떻게 작동 시키려면 어떻게해야합니까?

현명한 것을 가르쳐주세요. 나는 이것이 단순한 어리 석다는 것을 알고있다.

Answer 1

두 번째 단추 처리기에서 동일한 요소를 대상으로 지정하는 경우 add2는 첫 번째 요소 src 속성이 다른 요소 대신 변경된 첫 번째 요소와 같지 않아야합니다.

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'; 
}