Comments
Creating an Image Sprite Navigation with CSS
Written By alexhackbart on Oct. 23, 2007.
7 Comments
Report Note
+ Clip This
Here's a detailed tutorial on how to use image sprites as navigation bars. It is broken down into steps so it's easier to read and understand. If parts get confusing you can ask questions about it in the comments section of the site.
aaronr79
Written Oct. 23, 2007 / Report /
Whilst I'm sure this tutorial makes a perfectly functional menu using just one image, I think that the time spent calculating where the pixels start and finish for each roll-over would take quite a lot longer than just splicing the image up in photoshop.
xirclebox
Written Oct. 23, 2007 / Report /
there's always more than one way to skin a cat. some compliant. some not so compliant. some easy. some hard as hell. the beauty and pain of building web pages.
fray
Written Oct. 23, 2007 / Report /
...and using photoshop
Mike
Written Oct. 23, 2007 / Report /
Yup, "sprite" navigation is really helpful. Our new 3by9.com design uses a similar concept to do the top navigation hovers.
peroty
Written Oct. 23, 2007 / Report /
Image is Nothing. Thirst is Everything!
Sprite Navigation! Obey your Thirst!
AndrewIngram
Written Oct. 23, 2007 / Report /
Yes, it is a very good technique. That's why I wrote a plugin for fireworks that automates the process.
Link
alexhackbart
Written Oct. 23, 2007 / Report /
Actually it doesn't take very long at all once you do it once or twice, but there are a few advantages to it as apposed to slicing multiple images. One is the server only has to load one image; this way you can cut down on bandwidth and load time. I also like it better because its easy to update the whole nav.jpg and upload it again, as long as you don't change the size of the nav and each button the changes are instantaneous and easy to manage.
Also since you are only loading one image, the rollovers are come up instantly also because the server doesn't have to reload an image.