CSS Rollovers

luiz_itape · 02-16-2006, 04:45 AM

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

Code:

a.nav {
background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/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;
}

Your link code
????: NamePros.com http://www.namepros.com/webmaster-tutorials/168067-css-rollovers.html

Code:

<a href="home.html" class="nav">Home</a>

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 · 02-16-2006, 12:43 PM

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

J4m!3 · 02-24-2006, 03:49 AM

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

purustotle · 02-26-2006, 06:50 AM

Absolutely, an example would be nice.

02-16-2006, 04:45 AM	THREAD STARTER #1 (permalink)
luiz_itape New Member Join Date: Feb 2006 Posts: 3	CSS Rollovers 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 Code: a.nav { background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/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; } Your link code ????: NamePros.com http://www.namepros.com/webmaster-tutorials/168067-css-rollovers.html Code: <a href="home.html" class="nav">Home</a> 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."

02-16-2006, 12:43 PM	#2 (permalink)
Rowan W NamePros Regular Join Date: Dec 2004 Location: QLD, Australia Posts: 713	I think you need to provide an example of what the image would look like, for those who don't know. __________________ Flash is bad for websites Why tables for layout is stupid IE IS BAD

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS help "pain or saint"?	Maylin	Website Development	5	01-05-2006 02:42 PM
PHP, Mysql, CSS Coder Needed	weebguy	Web Development Wanted	1	12-27-2005 07:44 AM
CSS rollovers, and adsense advice	def1	Web Design Reviews	10	11-28-2005 11:26 AM
Trouble w/ CSS rollovers in IE	Splinter Freelance	Web Design Discussion	3	11-27-2005 12:57 PM

02-24-2006, 03:49 AM	#3 (permalink)
J4m!3 NamePros Member Join Date: Oct 2005 Location: Clevedon, UK Posts: 198	Not bad, i would of gone in to more detail thought about what else you can and an example would be nice..

02-26-2006, 06:50 AM	#4 (permalink)
purustotle NamePros Member Join Date: Dec 2005 Location: Finland Posts: 56	Absolutely, an example would be nice.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)