javascript 图像作为 <input type="button"/> 的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11988836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image as value for <input type="button"/>
提问by Alexander Palamarchuk
An interface of control-buttnos is released on default browser's styles. I try to use standart buttons () with images as values
在默认浏览器的样式上发布了 control-buttnos 的界面。我尝试使用带有图像作为值的标准按钮 ()
HTML:
HTML：
<div id="control-play" class="button"><span></span><input type="button" value=""/></div>
CSS:
CSS：
#control-play span {background-image: url('../i/ruler/play.png'); margin: 16px 0 0 18px; position: absolute; width: 16px; height: 16px;}
But of course I get a problem with :hover event when the cursor's hovering an image:
但是，当光标悬停在图像上时，我当然会遇到 :hover 事件的问题：
In JS I can activate click by catching images's onClick:
在 JS 中，我可以通过捕捉图像的 onClick 来激活点击：
$('#control-play span').click(function(){$(this).parent().find('input').click();})
But I can't do that for onHover event.
但我不能为 onHover 事件做到这一点。
As you can see, I don't imitate :hover {} and :active() styles, I use default ones. I could grab images and use them as backgrounds but it doesn't seem a good-style trick.
如您所见，我不模仿 :hover {} 和 :active() 样式，我使用默认样式。我可以抓取图像并将它们用作背景，但这似乎不是一个好的技巧。
So, colleagues, any ideas? Any of jQuery, CSS3 or HTML5 are welcome.
那么，同事们，有什么想法吗？欢迎使用任何 jQuery、CSS3 或 HTML5。
UPD:I mentioned it carefully, nevertheless most of answers suggest toggling whole background of the button. Note: I use buttons with browser's styles, I just try to use 16x16 icons instead of text labels.
UPD：我仔细地提到过，但大多数答案都建议切换按钮的整个背景。注意：我使用具有浏览器样式的按钮，我只是尝试使用 16x16 图标而不是文本标签。
采纳答案by Alexander Palamarchuk
The most suitable answer is in using HTML5 <button>...</button>instead of <input type=button value=""/>
最合适的答案是使用 HTML5<button>...</button>而不是<input type=button value=""/>
HTML:
HTML：
<button type="button" id="control-play" title="Play"><span></span></button>
CSS:
CSS：
button#control-play {width: 50px; height: 49px;}
button#control-play span {display: inline-block; background: url('../i/ruler/play.png') no-repeat;}
There's no need in sprites, 3 backgrounds for imitation standart browser opportunities for buttons. Everyone will use these buttons in its favorite style (even using skin for a browser), and only my icons will be permanent.
不需要精灵，3 个背景用于模仿标准浏览器按钮的机会。每个人都会以自己喜欢的风格使用这些按钮（即使使用浏览器的皮肤），只有我的图标是永久的。
Via Pointy's comment.
通过Pointy的评论。
回答by Chandrakant
<div class="button">
//height and width of this DIV should be same as `input[button]`
<input type="button" />
</div>
<style>
.button{
background: url("your_normal_image.jpg") no-repeat 0 0;
height: 123px;
width: 123px;
}
.button:hover, .button.some_class{
background: url("your_hover_image.jpg") no-repeat 0 0;
}
.button input[type="button"]{
opacity: 0;}
</style>
And for clicked event add .some_classwith .buttonusing Jquery - code will look like
而点击事件添加.some_class与.button使用jQuery -代码如下
<div class="button some_class">
//toggle between ".some_class"
<input type="button" />
</div>
another way is - Play with style background-position:instead of adding class .someclassusing image spriting method
To know more :Look at Image spritingarticle
另一种方法是 - 使用样式background-position:而不是.someclass使用图像精灵方法添加类
要了解更多信息：查看图像精灵文章
回答by volchkov
you have 3 css actions that work quite well
note: !importantwill force the background to change by giving this part a higher priority
你有 3 个 css 动作效果很好
注意： !important将通过给予这部分更高的优先级来强制背景改变
<style>
.button{
background: url("background.png") no-repeat 0 0;
height: 123px;
width: 123px;
border:0; // this part is important otherwise it leaves the borders
}
.button:hover{
background: url("background.png") no-repeat -123px 0 !important ;
} //moves the bg image up
.button:active{
background: url("background.png") no-repeat -246px 0 !important ;
} //move the bg up more when yu push the button
</style>
for beginers you can use 3 saparate images wich will result in loading delay on first hover or click:
对于初学者，您可以使用 3 个单独的图像，这将导致第一次悬停或单击时的加载延迟：
<style>
.button{
background: url("background.png") no-repeat 0 0;
height: 123px;
width: 123px;
border:0; // this part is important otherwise it leaves the borders
}
.button:hover{background: url("background1.png") no-repeat 0 0 !important;}
.button:active{background: url("background2.png") no-repeat -246px 0 !important ;}
</style>
回答by David Barker
If I understand correctly... You want to be using sprites. Sprites are background images that have both the Hover BG and Standard BG in one image. In this case, both 16px x 16px images would be in one image file with a total width of say 32px x 16px;
如果我理解正确......你想使用精灵。精灵是在一张图像中同时具有悬停 BG 和标准 BG 的背景图像。在这种情况下，两个 16px x 16px 的图像将在一个图像文件中，总宽度为 32px x 16px；
You then can use CSS to just switch the background position creating a smooth on hover effect with just CSS.
然后，您可以使用 CSS 来切换背景位置，仅使用 CSS 就可以创建平滑的悬停效果。
#control-play span
{
background-image: url('../i/ruler/play.png');
width:16px;
height:16px;
background-position: 16px 0px;
}
#control-play span:hover
{
background-position: -16px 0px;
}
回答by christian.thomas
I'd say the most semantic way is to have:
我会说最语义化的方式是：
HTML:
HTML：
<input type="button" class="button" value="Submit" />
<input type="button" class="button" value="Submit" />
OR
或者
<button type="submit" class="button">Submit</button>
<button type="submit" class="button">Submit</button>
CSS:
CSS：
.button {
display: block;
width: 16px;
height: 16px;
background: url('../i/ruler/play.png') top left;
border: 0;
}
.button:hover {
background-position: bottom;
cursor: pointer;
}
That way you don't have to rely on any Javascript (Javascript could also be turned off..)
这样你就不必依赖任何 Javascript（也可以关闭 Javascript ..）
