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

Question

I have a one row table that contains a series of buttons. Each button has its own unique image. As the user hovers over each button, I want to change the image. All my images are pre-loaded, so now I'm just working on the part where I iterate over the collection, determine its image, and change that image. First the 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>

I'm successful with identifying the collection since my console output matches what I would expect. But I'm stuck on capturing the image. This code doesn't throw any errors, but it doesn't switch the image, either

$("#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;
}

The object home_blue.src is instantiated in a preloader function:

home_blue     = new Image();
home_blue.src = "http://www.xxxxx.com/images/home_blue.png";

If there are better approaches, I'd appreciate hearing about them. Thanks!

Answer 1

If you're going to use jQuery, use 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

Instead of adding the background image to the button like that and using jQuery or Javascript to change it, use CSS, like this:

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');
}

By the way, you'd better add a class to each button and use the class in your CSS file, instead of the id. That way, you can reuse the background image for several buttons.