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

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

Answer 2

有几种方法。一般来说，CSS sprite 是理想的（也就是说，一个包含所有 3 种图形状态并仅根据当前状态移动的图像）。使用您所拥有的更简单的方法是：

<style type="text/css">
#myButton { width: 100px; height: 30px; background: url('upstate.png'); }
#myButton:hover { background: url('overstate.png'); }
#myButton:active { background: url('downstate.png'); }
</style>

如果您想知道如何使用 sprite 方法进行此操作，请查看：http ://css-tricks.com/css-sprites/

Answer 3

添加到上面的帖子中，CSS 只会使用 [hover] 样式扩展器解决您的 [overState] 状态。

如果您熟悉 jQuery，则可以按如下方式设置正确的事件处理：

$('#myButton').on('mousedown', function () {
  $(this).css('background','url('downstate.png')');
})

$('#myButton').on('mousedup', function () {
  $(this).css('background','url('upstate.png')');
})

$('#myButton').on('mouseover', function () {
  $(this).css('background','url('overstate.png')');
})

$('#myButton').on('click', function () {
  alert('myButton Clicked');
})