获取按钮的背景图像并更改它
获取按钮的背景图像并更改它
提问于 2015-01-10 23:03:09
我有一个一行表，其中包含一系列按钮。每个按钮都有自己独特的图像。当用户在每个按钮上盘旋时，我想要更改图像。我所有的图像都是预加载的，所以现在我只是在重复这个集合，确定它的图像，并改变它的图像。首先是HTML：
<table><tr id='menu_row'>
<td id='home'>
<button id='btn_home' onclick="btnHome()">
<img src="images/home_green.png">
</button>
</td>
<td id='capabilities'>
<button id='btn_capabilities' onclick="btnCapabilities()">
<img src="images/capabilities_green.png">
</button>
</td>
...
</tr></table>我成功地识别了集合，因为我的控制台输出与我所期望的相匹配。但我被困在捕捉图像上了。这段代码不会抛出任何错误，但也不会切换图像
$("#menu_row").find('button').hover(function() {
flipColor(event.target.id);}
);
function flipColor(btn_id) {
console.log(btn_id); // this shows the correct output
// this is where things go south
var image = document.getElementById(btn_id);
// this will expand into a switch statement eventually
image.src = home_blue.src;
}在预加载器函数中实例化对象home_blue.src：
home_blue = new Image();
home_blue.src = "http://www.xxxxx.com/images/home_blue.png";如果有更好的方法，我会很感激听到他们。谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-01-10 23:12:09
如果要使用jQuery，请使用jQuery：
$("#menu_row").find('button').hover(function () {
flipColor(this.id);
});
function flipColor(btn_id) {
$('#'+btn_id).find('img').prop('src', home_blue.src);
}Stack Overflow用户
发布于 2015-01-10 23:15:01
与其将背景图像添加到这样的按钮并使用jQuery或Javascript来更改它，不如使用CSS，如下所示：
HTML:
<button id='btn_home' onclick="btnHome()" />CSS:
#btn_home {
background:url('images/home_green.png');
}
#btn_home:hover {
background:url('images/home_blue.png');
}顺便说一句，您最好在每个按钮中添加一个类，并使用CSS文件中的类，而不是id。这样，您就可以将背景图像重用到几个按钮中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27882087
复制相关文章
相似问题
腾讯云开发者
