mouse events with buttons: mouseover, onclick, static

I'd like a button to have 3 different states (3 different images of the same button) -static -hover -click -release (back to static)

I've found plenty of examples of mouseover chaning 开发者_StackOverflowthe image, but nothing with the click option.

Thanks :)

High-level answer: use the CSS1 :active pseudo-class.

#myButton {
    /* static state */
}

#myButton:hover {
    /* hover state */
}

#myButton:active {
    /* state while clicked but not released */
}

The events you want are mouseover, mouseout, mousedown, and mouseup

From there you can easily move the background:

document.getElementById('my_element').style.backgroundPosition='100px 100px'