How to make CSS rollover image? (Sprites)

Question

I'm just trying to use this little trick that I saw in one of my web design magazines to do a little image transfer, but I just have a little problem. My attempt was a terrible failure. I just want to see the upper half (42px tall) and then the lower half when tipping over (-42px, obviously)

width is also 42px. Can someone write something to make this happen? image: http://img826.imageshack.us/img826/6568/homebi.png

Answer 1

All initial values ​​are (not :hover) and final ( :hover) background-position.

#test {
    height: 42px;
    width: 42px;
    background-image: url(http://img826.imageshack.us/img826/6568/homebi.png);
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: top;  /* <-- key step #1 */
}
#test:hover {
    background-position: bottom; /* <-- key step #2 */
}

Demo

---

re: <div> (<a>), :

• <div> <span>. ,
• accept! , CSS: display: inline-block .

2

Answer 2

:

<style type="text/css">
.menu {
}
.menu a {
    float: left;
    display: inline;
    width: 42px;
    height: 42px;
    text-decoration: none;
}
.menu a span {
    display: block;
    overflow: hidden;
    height: 0;
}
.menu .home {
    background: transparent url(http://img826.imageshack.us/img826/6568/homebi.png) 0 0 no-repeat;
}
.menu .link:hover {
    background-position: 0 -42px;
}
</style>

<div class="menu">
    <a href="#" title="Home" class="link home"><span>Home</span></a>
</div>

Answer 3

.

css

.rollover{display:block; height:42px; width:42px; background:url(http://img826.imageshack.us/img826/6568/homebi.png) top;}
.rollover:hover{background-position:bottom;}
.rollover span{display:none}

html

<a href="#" class="rollover"><span>Home</span></a>

, "", "".

, , , 84px, .