0

我知道我必须做错事，但我还是不完全理解我在做什么。我正在创建一个表单，它将有多个链接到 JavaScript 函数的按钮来做事。我的基本点是将这两个按钮放在同一页面上，当您 onMouseOver、onMouseDown、onMouseUp、onMouseOut 时，它会更改我的按钮的图像。

我知道还有其他方法可以做到这一点（更好的方法），但我正朝着这个方向努力，至少可以更好地理解 JavaScript 的工作原理。我知道我会在路上做一些更复杂的事情，可能需要这样的事情，我想确保当我到达那里时我理解它。

我遇到的问题是，当您尝试使用第二个按钮时，它没有任何作用。第一个按钮工作正常，但第二个按钮不行 当你尝试使用第二个按钮时，它会使第一个按钮熄灭。因此，如果我 onMouseOver 按钮 2，按钮 1 将显示效果。我尝试将我的图像文件复制到一个新集合中，这样它们就不会使用相同的图像，但这只是向我展示了当我使用按钮 2 时，为按钮 2 设置的功能正在应用于按钮 1。

无论如何，这是HTML代码....

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

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

我在这里做错了什么？如何让这些链接真正彼此分开工作？

请教我聪明的人。我知道这一定很愚蠢。

4

1 回答 1

0

您在第二个按钮处理程序中定位相同的元素，它应该是 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';
}
于 2012-04-24T21:38:44.597 回答