CSS Rollovers

[luiz_itape]

CSS Rollovers


Tired of using Javascript for your rollovers? Well, I looked a few tutorials, made some tweaks and now have a very effective way of doing them through CSS. Since IE doesn't support img:hover we'll have to stick with the good ol' a tag.

Before I show the code, I want to explain how it works.

Basically what happens, is you assign a class (must belong to the a tag) to a link. Depending whether you want to use text-links or image-links will determine whether you put text in the link or not. In that class, you set the size of the button, and attach a background that doesn't repeat and is set a position. Now, that background will have all the states (normal, hover, etc) in the one image (acts like a preloader.) On the hover you will just change the position on the image. Works really well.

Now for the code (I'll assume they're using text as their link). Your CSS

[COLOR=Blue]a.nav {
background-image: url(images/nav_link.jpg);
background-repeat: no-repeat;
background-position: -85px 0px;
display: block;
width: 85px;
height: 21px;
margin: 0; 
padding: 0; 
}
a.nav:hover {
background-position: 0px 0px;
}[/COLOR]

Your link code

[COLOR=Blue]<a href="home.html" class="nav">Home</a>[/COLOR]

It's that simple. But when you're doing it without text (having the link text in the graphic) you have to make a class for each one. I means a bit more CSS, but can make for some interesting rollovers. You can also add more states by doing something similar to the "a.nav:hover."

 

[Rowan W]

I think you need to provide an example of what the image would look like, for those who don't know.

 

[J4m!3]

Not bad, i would of gone in to more detail thought about what else you can and an example would be nice..

 

[purustotle]

Absolutely, an example would be nice.