Question

I have a <button> with a nested image and I’m using jQuery to toggle the image src attribute on mousedown and mouseup. When the button is clicked in IE8 the image moves down and right 1 pixel, as buttons do in IE, but then it sticks there and won’t return to its original position. If I remove the mouseup event the button functions normally, but of course my js button behavior breaks.

In googling the issue I have found another bug that causes a button with a CSS background to move up and left when active, but then return. My button gets stuck, and only when there is a mouseup event registered.

The markup looks like this:

html:

<button type="button" id="sdbSearchButton" title="Zoom to this room">
    <img id="sdbSearchButtonImg" src="images/control_play.gif" />
</button>

CSS:

label.sdbAttr button {
    float: left;
    background-color: white;
    border: none;
    outline: none;
    margin-left: 5px;
    padding: 0px;
    height: 16px;
    width: 16px;
}

javascript:

$('#sdbSearchButton').mousedown(function(e) {
    $(this).children().attr('src', 'images/control_play_blue.gif');
    searchForSpace();
}).mouseout(function() {
    $(this).children().attr('src', 'images/control_play.gif');
}).mouseup(function() {
    $(this).children().attr('src', 'images/control_play.gif');
});

Answer 1

Why are you using an img?

button {
background-image: url('img1')
}
button:active {
background-image: url('img2')
}