Single Image CSS Rollover Effects

There are a lot of different ways to make rollover effects on menu items these days. Most of these involve two separate images with color changes between the two copies of the image. Most of them also involve using javascript to cause the images to swap when the reader hovers their mouse over the image.

Some designers, like myself, eschew this path because we like things light. An extra image and a bunch of extra javascript just don’t feel right. Many of us simply use CSS to style rollover effects on text elements like anchors or list items. That actually works pretty well, but has a serious limitation.

Sometimes you just don’t want the text on the page. For SEO reasosn, generally, you don’t want to use text in the anchors for the rollover links. In these cases, I’ve always reverted back to the two image, javascript rollover, but now I’ve stumbled on another way of doing this.

I really can’t believe I never thought of this before. I’m sure someone else has been doing it for ages, maybe you already know about it and I’m just behind the times here.

Basically the trick is to use a transparent .png image to create the “button” look for your rollover and then apply color changes to the container element when the user hovers over it.

Here’s what it looks like:

Here’s the html code

<div class="pngtest">
<ul>
<li><a href="#"><img src="home.png" alt="PNG Test Btn 1" /></a></li>
<li><a href="#"><img src="blog.png" alt="PNG Test Btn 2" /></a></li>
<li><a href="#"><img src="good.png" alt="PNG Test Btn 3" /></a></li>
</ul>
</div>

and the css

.pngtest {
margin: 0;
padding: 0;
}

.pngtest ul{
list-style-type: none;
margin: 0;
padding: 0;
}

.pngtest li {
margin:0;
padding:0;
width: 150px;
height: 25px;
display: inline;
float: left;
background: #660066;
overflow: hidden;
}

.pngtest li a:hover {
background: #fe6700;
}

Initially I used this code to highlight the list item behind the image, and that works in Firefox, but not in Internet Explorer.

.pngtest li:hover {
background: #fe6700;
}

Highlighting the anchor as in this code still works in Firefox, and it also works in Internet Explorer, so this is the way to go.

.pngtest li a:hover {
background: #fe6700;
}

The overflow: hidden; is there on line 20 because for whatever reason Internet Explorer insisted on adding space to the list items beyond the image borders even with all of the boundaries specified for ‘0′. This resulted in a band of about 5px tall colored below the image row. adding the hidden overflow statement removed this color band.

Of course, if you don’t need the button look, and you are just doing this to hide the text from the search spiders, you can always just use an image with the text on a transparent background. Then it will llok and behave like a traditional CSS/XHTML menu class, but the text won’t be there. You would probably want to additioanlly name the images with numbers instead of the text you are hiding. I gave these names just to make it more apparent what is happening in the code.

If you have a lot of readers using Internet Explorer 5.5 or older browsers, the transparent .pngs will not be transparent, but will have an ugly gray background. You can look for a png fix for this, but they are not always 100% and i don’t understand why some work sometimes but not other times, so I can’t recommend any. Hardly anyone visits my site using an old browser, so i have decided i really just don’t care enough for the extra effort involved. Especially since i don’t have a copy of the old browsers to test with and have to rely on annoying procedures like using ThumbShots for each test and tweak.

TAGS: None