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

I have three png files for my up/over/down button states.

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

How do I make such a button in html?

如何在html中创建这样的按钮?

Looking for something like:

寻找类似的东西:

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

Obviously that's not how it works. But that's how I want it to work. What is the easiest/best way to make such a button. No flash allowed.

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

3 个解决方案

#1

CSS supports active and hover states which would suffice for all except button release.

CSS支持活动和悬停状态,这些状态足以满足除按钮释放之外的所有状态。

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

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

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

It may be likely that you wouldn't need a button release state. If the button is submitting a form or otherwise sending the visitor to a new browser page, they aren't likely to notice the button release before the page starts to refresh/load.

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

#2

A couple of ways. Generally a CSS sprite would be ideal (that is, a single image that holds all 3 of your graphic states and just shifts based on the current state). The simpler approach using what it looks like you've got would be:

有两种方法。通常,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>

If you want to know how to go about this using the sprite method, check out: http://css-tricks.com/css-sprites/

如果您想知道如何使用精灵方法,请查看:http://css-tricks.com/css-sprites/

#3

Adding to the posts above, CSS will only solve your [overState] state using the [hover] style extender.

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

If you are familiar with jQuery you can set up the proper event handling as follows:

如果您熟悉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');
})

#1