CSS Rollovers?

What's the easiest way to do image rollovers (with links)

(and without text)

I usually do it like this:

<a href="#" class="button">Text Here</div>

css:

.button:link {
background: url('images/button.jpg') no-repeat top;
width: 100px;
height: 10px;
text-indent: -10000px;
}

.button:hover {
background: url('images/button.jpg') no-repeat bottom;
width: 100px;
height: 10px;
text-indent: -10000px;
}

Something like that. In this, I would have a 20px buttom image with the before state at the top and hover state at the bottom.

Edit: I did this kinda quick, you might have to put it in a div. Try it out though.

would it still work without the 'text here' part, because i just want to do an image rollover with no text

I have used this on a few designs for the navigation and it works great: http://www.wellstyled.com/css-nopreload-rollovers.html

Originally Posted by MattL I have used this on a few designs for the navigation and it works great: http://www.wellstyled.com/css-nopreload-rollovers.html

how do you link the image with that??
i need one without text links, i need the image to be clickable, and image changed when hovered

This is the most logical way of doing it. I know another way but you would have to use divs or something of the sort, so this just cuts down on the code.

heh, you forgot the onMouseout property, but i added it, and it worked, thanks alot

Oh, yeah. I did that really quick.

No problem.

When i do navigations, it's always with an unorderedlist but with images as the link.
Same thing can be done say with a heading..

Here is the example for an unordered list:

Then for CSS you need to set the initial UL and LI properties:

And here is the CSS for the initial button and rollover button:


Padding is where you set the height, width is width.

I tend to use one image for all buttons to save from loading and that's where the two zero's at the end come in, changing it to #px to set the spot in the image the button resides (say if the button was 150 pixels wide, and you had five buttons, the first button's normal state stays at zero, then the rollover would be at -750px).

Jeff, that is what I do but I wasn't sure if he was doing a navigation or a simple one image rollover so I gave him a code to do just that.

Good job at posting that though. Really helpful to some people.