when I visit some websites I see that their menu bar seem to be a single bar (like an image ) with some demarcations but once you move the mouse over it that part only changes into another color to indicate that the mouse points to that link.How is this seem to be a single bar flipped or what happens exactly?.any one who can help me out there?. your help is greatly appreciated.

Member Avatar

This is probably a CSS sprite.

A sprite is an image that contains up to 3 duplicates (so 4 images in all), representing the normal (a:link) state, the visited (a:visited - this is usually omitted for menu buttons), the hover (mouseover or a:hover) and the active (mousedown or a:active).

The images are usually placed vertically or horizontally. The CSS rules then change the background-position values depending on the a state.


You don't have to create an image for each menu item either, you can create a whole menu image and just duplicate that.

Here's an example: http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites