2014-05-04 48 views
0

我需要为正常状态图像和选定的状态图像开发一个功能按钮。我做了眼罩,但我找不到任何确切的解决方案。我在HTML中使用下面的代码如何将选择的图像设置为按钮

<button><img src="kitty_normal.png" /></button> 

请帮我选定的图像(kitty_selected.png)的按钮。

+0

[将鼠标悬停在按钮上时更改字体颜色和背景图像]可能的重复(http://stackoverflow.com/questions/11387146/changing-font-color-and-background-image-when-hovering-over-button ) – VicM

回答

0

那么,你将需要使用CSS和JS来做到这一点或只是CSS,取决于你的需求。

在这里看到的简单的代码,这样做的:

http://jsfiddle.net/7Shv9/3/

现在,我不是你为什么要使用图像的按钮里面,你didn't指定,但如果你想用非常肯定像你一样的图像作为背景或无文本将显示只是你的按钮背景属性,若否,则进行与代码很小相同,但针对图像元素,而不是按钮的

的jsfiddle显示这两种方法

HTML

<button id="myButton">My button</button> 

CSS

#myButton 
{ 
    background-image: url("http://www.picgifs.com/smileys/smileys-and-emoticons/hello-kitty/smileys-hello-kitty-779727.gif"); 
    height: 50px; 
    width: 100px; 
} 

#myButton:hover 
{ 
    background-image: url("http://www.picgifs.com/smileys/smileys-and-emoticons/hello-kitty/smileys-hello-kitty-150863.gif"); 
    height: 50px; 
    width: 100px; 
} 

最后这个问题已经被问对SO几次,所以请首先搜索当前的答案张贴新的重复一个保持网站尽可能干净了。

+0

嗨,这是第一次工作,但接下来它不工作 – Ravi

+0

对我来说它始终使用jsfiddle – VicM

相关问题