ghettocooler.net – In a class of it's own. » Simple CSS Image Rollovers. Back to the Basics.

Thursday, January 08, 2009 (Simple CSS Image Rollovers. Back to the Basics.)

Javascript rollovers?

Really?

Still?

Well, that’s just embarrassing.

Stop using those archaic Javascript rollovers and switch to a simple, time tested, CSS method.

For this example, let’s turn a commonly used “Read More” link into a colorfully interactive link of beauty. We’ll get right to it.

Your HTML:

<a href="#" class="read_more">Read More</a>

Your CSS:

a.read_more {
display: block;
width: 139px;
height: 22px;
padding: 4px 0 0 0;
background: transparent url(read_more.png) no-repeat 0 0;
text-align: center;
color: #fff;
text-decoration: none;
}
a.read_more:hover {
background-position: 0 -25px;
}

Your final product:

Shake some dust out of your yesteryear HTML/CSS and leave that javascript for rollovers behind, once and for all.

Once you’ve got the basics down, take it to the next step, with Simple Navigation with CSS Image Replacement.

Did you find this post helpful?

Posted in interweb

2 comments:

Eric #

*throws jellybeans at javascript*
Bill Keller #

Woot! There’s the attitude I love to see!

Leave a Comment:

Powered by WordPress using the Minimal, Really Theme. Inspired by Things