The tutorial How to create a css menu using image sprites by Chris Spooner from www.line25.com, is a great tut to get you into the concept and idea of using image sprites to create graphic menus. It does however have an issue which a lot of people have encountered with this method that appears only in IE, which is a an ugly jump or flicker. If IE is of no consequence to you and your website though, then this method is great.
http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites
I needed to consider that a significant part of my clients audience would be from the corporate sector and would often be viewing the site in Internet Explorer and possibly an outdated version of IE. Updating software in large corporations often needs to be done by the systems administrator, and I think this has a lot to do with so many old browser versions are still alive and active out there. So I then looked at A list apart’s tutorial called CSS Sprites: Image Slicing’s Kiss of death by Dave Shea. I redid my menu using this method and tested in IE and hay presto, NO Flicker or menu jumping down a few pixels. Great!
http://www.alistapart.com/articles/sprites
A List apart also makes reference to the article: Fast Rollovers Without Preload by Petr Stanicek for the basics of the technique.
http://wellstyled.com/css-nopreload-rollovers.html
And lastly for your reference Chris Spooner also has a great little tutorial on simple buttons with css image sprites. And I think once you’ve read all of them you will have a better understanding of using css image sprites – at least I do.
http://line25.com/tutorials/how-to-build-a-simple-button-with-css-image-sprites
I spent some time looking all this up to solve the issue I was having in IE so I thought I would write it down and share the tuts that helped me.
Thanks to all the articles mentioned here for the learning experience and the knowledge!
