Why slice a new image for each item in a navigation when you can use the same image for all of them? If you’re thinking you can’t do that without sacrificing rollovers, think again. By creating a navigation using an image sprite, you can have a complete navigation, rollovers and all, by only using one image.
What is an image sprite?
Image sprite originated from old nintendo games - what developers had to do to keep the game from having to load a new image each time a different character entered the screen was store all of the images into a grid - once they had this grid they could call different sections of it and tell it to display it on the screen. The same big image was loaded one time, from then on different sections were called and displayed on the page.
How to use image sprites to create a navigation bar
What we are going to do is copy the old image sprite technique used in video games, and apply it to our CSS. How you ask? We can do this in by off-setting the background position of each list item in our nav. Let me break this down step by step to help understand this concept. (more…)
