Question

我是新手，但我确信这很简单。我正在尝试在我的网站上设置多个动画图像按钮。我设置了两个测试按钮，但只有第二个正在工作。它们都可以自己工作，但是当我将它们加在一起时，只有一个有效。我错过了什么？提前致谢。

HTML:

<html>
<head>
<title>Default</title><script type="text/javascript" src="script.js"></script>
</head>

<body>
<div align="center"><br>
<a href="url_link"><img style="border: 0px solid ; width: 60px; height:60px;" alt="" src="clickA1.png" id="button1" onmouseover="rollover()" onmouseout="rollout()" onmousedown="down()" onmouseup="rollover()"></a>
</div>
<br />
<div align="center"><br>
<a href="url_link"><img style="border: 0px solid ; width: 60px; height: 60px;" alt="" src="clickB1.png" id="button2" onmouseover="rollover()" onmouseout="rollout()" onmousedown="down()" onmouseup="rollover()"></a>
</div>
<br />
</body></html>


Javascript:

<script>

function rollover () {
document.getElementById ("button1") .src = "clickA2.png"
}
function rollover () {
document.getElementById ("button2") .src = "clickB2.png"
}

function rollout () {
document.getElementById ("button1") .src = "clickA1.png"
}
function rollout () {
document.getElementById ("button2") .src = "clickB1.png"
}

function down () {
document.getElementById ("button1") .src = "clickA3.png"
}
function down () {
document.getElementById ("button2") .src = "clickB3.png"
}

</script>

Answer 1

你的功能相互骑行。为button2

的功能定义一个不同的名称

例如：

function rollover () {
  document.getElementById ("button1") .src = "clickA2.png"
}

function rollover2 () {
 document.getElementById ("button2") .src = "clickB2.png"
}

Answer 2

您使用了多个具有相同名称的功能。在这些情况下，稍后编写的函数会覆盖相同范围内的先前函数。

一种可能的方法是在函数调用中包含参数

<button ... onmousedown="down('button1')" ...></button> <button ... onmousedown="down('button2')" ...></button>

并在你的功能中处理它们。

function down (button) { document.getElementById (button) .src = "clickB3.png" }

或者您也可以检测从mousedown事件中按下的按钮。

Answer 3

您正在编写两个具有相同名称但不同身体的功能。第二个替换第一个实现。

2个动画图像按钮只有1个工作

3 个答案: