How To Do CSS Rollovers Using Background Images or Colors

Wednesday, October 10th, 2007

Categories: Web Development

RSS Comment Feed

Trackback

AddThis Social Bookmark Button

I just thought I’d share this technique with you. Even though using images as links aren’t intuitive or user friendly, it’s a good idea that if you’re ever in a situation where you’re forced to do so, you have an easy way out. This example uses a single image or a background color and simple CSS to do rollovers. Let’s look at some of the advantages to this technique which outline why you should use CSS for image rollovers.

Advantages of CSS Rollovers vs Javascript Rollovers

  • Easy restyling – Global CSS files make it easy to switch up backgrounds, images and image sizes
  • Faster download – One image downloads faster then two images half its size
  • Less Code – A lot less code compared to its Javascript alternative
  • Works for Screen-Readers - Using CSS elements we can simulate an Alt tag
  • Background Images/Colors Don’t Print – Since we’re styling the background image, it won’t print This is good if you’re using bright images or colors and don’t want them to waste printer ink
  • It’s Not Javascript – This technique helps if you happen to catch one person who has Javascript disabled

Disadvantages of CSS Rollovers vs Javascript Rollovers

  • Background Images/Colors Don’t Print – If the image is a critical part of your website when it’s printed, you’ll be missing it.

How To Do A CSS Image Rollover

It’s fairly straight-forward. First, what you want to do, is create a single picture with both your button’s ON state (hover state) and OFF state (normal state). This can be a .gif or a .jpg file. My button looks like this:

CSS Image Rollover Example

It’s 200 pixels wide and 50 pixels. Each button is 25 pixels tall. It’s a good idea to make one state, double your canvas’s height and copy and paste your state below the original.

Once you have your button, you can start typing your CSS code. For now, you should copy and paste what I have:

<style type=”text/css”>
.idName a {
width:200px;
height:25px;

background:url(http://www.pat-burt.com/wp-content/CSS_rollover.gif) 0 0;
display:block;
text-indent:-1500px;
overflow:hidden;
}
.idName a:hover { background-position: 0 -25px;}
</style>

I’ll quickly go over what each of the tags do:

  • <style type=”text/css”></style> – Tells the browser you’re going to have CSS tags
  • width:200px; height:25px; – Defines the height of a button
  • background:url(http://www.pat-burt.com/wp-content/CSS_rollover.gif) 0 0; - Defines the top half of the button as its default state and places it at the top left corner of the div container (opx, 0px)
  • display:block; – Tells your <a> tag that it’s going to be a block.
  • text-indent:-1500px;overflow:hidden; – Special CSS attributes that allow us to place Alt tags that make it easy for screen readers to navigate and search engines to spider. text-indent pushes the text outside of the div, the overflow:hidden; hides it.
  • .idName a:hover { background-position: 0 -25px;} - CSS that tells the background image to move up to 0px, -25px to display the on state of the image.

For your HTML, you can simply type:

<div class=”idName”><a href=”#”>Alt Text</a></div>

That’s pretty straight-forward. We’re identifying the class we just defined and inserting our link, complete with Alt Text.

Just using that and pasting that into an HTML file, you can get a result that looks and works like this:

Result

Alt Text

How To Do A CSS Background (Color) Rollover

This is pretty simple, we can change a few attributes from our original files, this time keeping our Alt Text visible:

<style type=”text/css”>
.idName a {
background:#00ff00 0 0;
width:200px;
height:25px;
display:block;
}
.idName a:hover {
background-color: #ff0000;
}
</style>
<div class=”idName”><a href=”#”>Testing</a></div>

That will give you something that looks like this. Of course, you should take the liberty of additionally styling the link name.

Result

Testing

That’s all for now, I hope that helps. :)

Bookmark this blog using any bookmark manager!
Subscribe to Pat-Burt.com via RSS

Error. Page cannot be displayed. Please contact your service provider for more details. (17)



Related Posts


Subscribe to this Post

10 Responses to “How To Do CSS Rollovers Using Background Images or Colors”

  1. Rob C Says:

    Great little tutorial – I’d spent hours trawling the net looking out for a valid CSS way of achieving this, and your approach does the trick, and very neatly too!

    Thanks a load :)

  2. Patrick Burt Says:

    Cheers Rob, Glad to hear I helped. :)

  3. j Says:

    could you use use a title tag in the link instead of pushing the alt tag way off to the left? I wonder if search engines might consider pushing the alt text way off to the side as a non-kosher SEO tactic.

    Would a title tag allow as good of accessibility as an alt tag?

  4. Patrick Burt Says:

    I don’t know about the title attribute, j. Because there wouldn’t be any content in the A tag. Which I imagine might be a little strange accessibility wise. Hell if it were up to me, I’d suggest using both.

    It does seem non-kosher, but when you think about it, we are just trying to accomodate accessibility (and Search Engines on the way) in the first place.

  5. j Says:

    I really like your solution. It is very elegant.

    Have you ever seen the so-called ‘Trifecta’ button? I wonder what you think about how they integrate text into their button, putting keywords in a span. (I’m not sure that I understand their method as I’m pretty new with this.)

  6. j Says:

    link to Trifecta button:
    http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml

  7. Patrick Burt Says:

    The way I see it j, you can throw a 1×1 pixel image in the code I have above and slap an alt tag on it for the same effect (search-engine wise)

  8. kudafoolhu Says:

    outline: none;

    clear the dotted lines in firefox. :)

  9. Stephane Says:

    Hello. I had try to used your css style it works great but my text is still on the top. i had remove the css line about -15000 to show the a value. I’Ve try to correct this with padding-top: 10px; it works but the box size had enlarged and i see the bottom part of the other section. Could you help me with that bug?

  10. pippa butt lift, pmma injections, hydrogel injections, maca root, gluteal enlargement, fix-a-flat injections, bigger booty, pippa middleton butt exercises Says:

    It?s really a nice and helpful piece of info. I am glad that you just shared this useful info with us. Please keep us up to date like this. Thank you for sharing.