Question

<a href="#" onMouseOver="document.getElementById('button1Inline').style.backgroundPosition='0px -90px';">
    <img src="ads/button1.png" id="button1Inline" />
</a>

The button1.png is a 180 pixels tall sprite comprised of two effect halves. Due to unnatural forces beyond my control I have to make this work inline. I know it’s not best practice and I feel terrible about myself, but right now I just need it to work. Please and thanks!

Answer 1

One way to do that could be having a HTML like this:

<a href="#" id="button1"></a>

And you could give it CSS properties like display: block; or display: inline-block; with the width of your image and half the height of it and then a :hover style.

For example:

#button1 {
    display: block;
    width: 180px; /* assuming it's square */
    height: 90px;
    background: url(<path_to_images>/button1.png) top left no-repeat transparent;
    background-position: 0 0;
}
#button1:hover {
    background-position: 0 -90px;
}

That way you don’t need any Javascript and have no side-effects.

Remember background-position just works for HTML elements that have a background-image set.