ansaurus

Question

How to make a CSS rollover image? (sprite)

Answer 1

+2 A:

Try this:

<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>

Lucius 2010-10-16 19:46:18

Answer 2

A:

Heres the bare bones for an image rollover.

the 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}

The html

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

The important part is the background position, which on the buttons normal state is set to 'top', when you rollover the background postion is 'bottom'.

Assuming your image which contains both button states is 84px high this will work fine.

Rocket Ronnie 2010-10-16 21:05:21

Answer 3

+3 A:

It's all about the initial (non-:hover) and final (:hover) values of 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

As per your comment re: wrapping the <div> with an anchor (<a>), here's what to do:

Swap the <div> out for a <span>. This is because valid children of anchors must be inline elements
But inline-displayed elements won't behave accept dimensions! So, fix this new problem with one additional CSS property: display: inline-block on the span.

Demo 2

Matt Ball 2010-10-16 21:44:26

Hey Matt that's the best implementation for a rollover that I've seen. Nice and simple. I like the 'top' and 'bottom' positioning, almost foolproof.

MikeAinOz 2010-10-16 21:50:55

@Mike: thanks! I figured it's a lot clearer to **avoid** the `background: ...` shorthand. Hopefully it shows the exact minimum you need.

Matt Ball 2010-10-16 21:57:31

This is perfect. :) but the small issue here is, How would I make this a link as well

Ampix0 2010-10-17 03:08:29

ok and a <a href> tag out side the DIV should work :P <3

Ampix0 2010-10-17 03:14:14

@Ampix0 see my edit. Easy peasy!

Matt Ball 2010-10-17 03:24:50

In this case it fits, but if you are using a real sprite image (more than just the two states of the same image) you cannot rely entirely on the top/bottom positioning.. a fixed pixel position imho is better for a more general approach

Lucius 2010-10-17 11:13:09

@Lucius: you're absolutely right, but I wanted to make it as simple and clear as possible because the OP said that previous attempts had not worked at all. Further, if you're going to use a "real" sprite image, as you say, with more than two images, then it's much more likely that you won't be creating the image and CSS by hand at all, but rather using an image+CSS generator.

Matt Ball 2010-10-17 15:32:59

Answer 4

+1 A:

Here is nice video that show you how to do it: http://mustardseedmedia.com/podcast/episode6

redhatlab 2010-10-17 03:41:39

ansaurus

tags:

views:

answers:

How to make a CSS rollover image? (sprite)

related questions