Question

我有一个包含一系列按钮的行表。每个按钮都有自己独特的图像。当用户将鼠标悬停在每个按钮上时，我想要更改图像。我的所有图像都是预先加载的，所以现在我只是在迭代集合，确定其图像和更改图像的部分上工作。首先是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";

如果有更好的方法，我很高兴听到他们的消息。谢谢！

Answer 1

如果您要使用jQuery，请使用jQuery：

$("#menu_row").find('button').hover(function () {
    flipColor(this.id);
});
function flipColor(btn_id) {
    $('#'+btn_id).find('img').prop('src', home_blue.src);
}

Answer 2

不是将背景图像添加到按钮中并使用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。这样，您可以将背景图像重用于多个按钮。

获取按钮的背景图像并进行更改

2 个答案: