Question

我是用HTML创建网站的新手。我免费使用所有SeaMonkey软件。所以，我想创建几个图像按钮，当用户将鼠标移动到图像上时，这些按钮会发生变化。我已经为每个按钮的不同阶段创建了3个图像（正常，活动和单击）。我为第一个按钮写了这段代码：

<body>
    <a href="first.html" onmouseover="return changeImage(jsbutton)" onmouseout="return changeImageBack(jsbutton)">
        <img name="jsbutton" src="first normal.png" alt="first">
        <script type="text/javascript">
            function changeImage() {
                document.images["jsbutton"].src= "first active.png";
                return true;
            }
            function changeImageBack() {
                document.images["jsbutton"].src = "first normal.png";
                return true;
            }
        </script>
    </a>
</body>

它有效。但是当我为第二个按钮做同样的事情时，它没有工作，除此之外，第一个按钮也停止了工作。我需要更改什么才能使其正常工作？

更新

对于我写的第二个按钮：

<a href="second.html" onmouseover="return changeImage(jsbutton)"
onmouseout="return changeImageBack(jsbutton)">
<img name="jsbutton" src="second normal.png" alt="second">
<script type="text/javascript">
function changeImage()
{
document.images["jsbutton"].src= "second active.png";
return true;
}
function changeImageBack()
{
document.images["jsbutton"].src = "second normal.png";
return true;
}
</script> </a>
</body>

Answer 1

您的JavaScript失败，因为您对两个图像使用相同的名称属性。每个元素都必须具有唯一的名称。

话虽如此，您所使用的功能已内置于CSS中，因此，除非您对此有特定要求，否则这是一个在CSS中更好解决的问题，使用：hover。

所以在你的HTML中：

<a href="first.html" id="firstButton"></a>

在你的CSS中：

#firstButton {
  background-image: url('first normal.png');
  display:block;
  height: [height of img];
  width: [width of img];
}
#firstButton:visited {background-image: url('first visited.png'); }
#firstButton:hover { background-image: url('first active.png'); }

你完成了！没有使用重新创建已内置于CSS的功能！

Answer 2

您正在为两个图片使用相同的“name”属性，即jsbutton。使用不同的名称属性。此外，css :hover是解决此问题的更好方法。

Answer 3

你也可以使用内联javascript来实现这个目的，因为它非常简单：

<a href="first.html" >
    <img onmouseover="this.src = 'second active.png'; " src="second normal.png" onmouseout="this.src = 'second normal.png'; "  alt="first" />
</a>

这是Demo，其中我使用了一些随机图片网址

希望这有帮助。

如何创建几个javascript图像按钮？

3 个答案: