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精灵是理想的（即，单个图像保存所有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>

如果您想知道如何使用精灵方法，请查看：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');
})

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

3 个答案: