Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

November 21, 2007

2 Comments

Accessible and Search Engine Friendly Image Rollover with CSS and Sprites

by in Accessibility,css,Web Development on November 21, 2007 @ 12:09 am

I’ve been using StumbleUpon for a few weeks now and have found a ton of sites that have given me a ton of knowledge, some that have confirmed my thoughts of quite a few things and sites that just made me shake my head at.

One such site was talking about CSS Image Rollovers and their examples consisted of a <A> tag wrapping a none breaking line space, I won’t post a link because I have actually seen quite a few other sites doing the same thing and don’t want to single anyone out. But what really made me frustrated is this particular site had a least 50 comments saying how great this was. While I don’t consider myself an expert there are a few things I truly believe in: clean code and accessibility. As it stands now, my blog is not 100% accessible, there are things I need to do to make it better, and those things are in the works.

So, what I would like to do is show you a way of making image rollovers while being accessible, and search engine friendly.

Say we have an image sprite like below (we can cover the pros and cons of image sprites in another post, these icons can be found at http://utombox.com/my-works/):

The style sheet code:

  1. .icon{
  2.     display:-moz-inline-box;
  3.     display:inline-block;
  4.     overflow:hidden;
  5.     background:url(imageRollover.png) no-repeat;
  6.     text-indent: -3000px;
  7.     *text-indent:0px;
  8.     font:0/0 Arial;
  9.     color:rgba(255,255,255,0);
  10.     vertical-align:bottom;
  11.     width:100px;
  12.     height:100px;
  13. }
  14.  
  15. .iconYouTube{}
  16. :hover.iconYouTube{background-position:-200px 0px;}
  17.  
  18. .iconFlickr{background-position:-100px 0px;}
  19. :hover.iconFlickr{background-position:-300px 0px;}
  20.  
  21. .iconRss{background-position:0px -100px;}
  22. :hover.iconRss{background-position:-200px -100px;}
  23.  
  24. .iconFeedburner{background-position:0px -200px;}
  25. :hover.iconFeedburner{background-position:-200px -200px;}
  26.  
  27. .iconDelicious{background-position:-100px -200px;}
  28. :hover.iconDelicious{background-position:-300px -200px;}
  29.  
  30. .iconTechnorati{background-position:-100px -100px;}
  31. :hover.iconTechnorati{background-position:-300px -100px;}



The Html code:

  1. <a href="" title="youtube icon" class="icon iconYouTube">youtube icon</a>
  2. <a href="" title="flickr icon" class="icon iconFlickr">flickr icon</a>
  3. <a href="" title="rss icon" class="icon iconRss">rss icon</a>
  4. <a href="" title="feedburner icon" class="icon iconFeedburner">feedburner icon</a>
  5. <a href="" title="delicious icon" class="icon iconDelicious">delicious icon</a>
  6. <a href="" title="technorati icon" class="icon iconTechnorati">technorati icon</a>



The outcome:

youtube iconflickr iconrss iconfeedburner icondelicious icontechnorati icon



The Explanation:
Lets start off with the easy things to explain; in the instance above I am using an image sprite which, depending on how many external elements you need to load, will speed up load time. In the first class icon we are setting the background as the sprite and then proceeding classes we simply position the background image to get the desired image showing with both the default image and the hover.

The hard thing to explain, at least for me, is what everything in the icon class is doing. I will try, but if I mess something up, call me on it.

  • display

    • -moz-inline-box: for mozilla based browsers
    • inline-block: supported by IE and all other grade-A browsers
  • overflow

    • hidden: make everything hidden if it is outside the box (ie6, you know I talking about you)
  • background

    • url: ummm… the background image
  • text-indent

    • without *: applies to only block-level elements, table cells and inline blocks, since we are using -moz-inline-box, firebox will not use this
    • with *: IE does not support it correctly, so we set it back to 0
  • font

    • 0/0 Arial: this is to set the text to a very small size, there are some browsers that do not support this shorthand, but I can’t remember which ones off hand.
  • color

    • rgba(255,255,255,0): this is a css3 spec and is only being supported by safari and firefox 3
  • vertical-align

    • bottom: this is required for block elements to keep them inline with text



The Small Print:
There are some thing to consider when doing the rollovers or image replacements in general; it is not 100% accessible, meaning, although screen readers will be able to pick it up, people that can see, but have poor vision will not be able to set the font any bigger then what you have in your image.

With that said, have fun with it. Any questions comments or concerns, feel free to drop a line.

Update 11/21/2007: Came across a really nice article about css sprites, very good read.

back to beginning of this post back to skip to links

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

2 Responses to “Accessible and Search Engine Friendly Image Rollover with CSS and Sprites”

Hey Benjamin,

Nice article =) Gotta spread the CSS Sprites love!

Thanks for stopping by Chris, I am falling in love with your site.


Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

67 queries. 0.460 seconds. Powered by WordPress visitor stats