javascript - 来自 png 的具有上/下/下状态的 HTML 按钮

Question

我的上/上/下按钮状态有三个 png 文件。

如何在 html 中制作这样的按钮？

寻找类似的东西:

<button id="myButton" upState="upstate.png" downState="downstate.png" overState="overState.png" onClick="someFunction()"/>

显然这不是它的工作原理。但这就是我希望它工作的方式。制作这样一个按钮的最简单/最好的方法是什么。不允许闪光。

Answer 1

CSS 支持事件和悬停状态，这足以满足除按钮释放之外的所有情况。

#myButton {
width: 90px;
height: 20px;
background: url(defaultstate.png);
}

#myButton:hover {
background: url(overstate.png);
}

#myButton:active {
background: url(downstate.png);
}

您可能不需要按钮释放状态。如果按钮用于提交表单或以其他方式将访问者发送到新的浏览器页面，他们不太可能在页面开始刷新/加载之前注意到按钮的释放。