Stylish menu bar

[enimy6]

Hello!

 

I want to make my navigation bar less boring and lame, I want to create a navigation bar with buttons (not just text with spacing & hyperlinks)

 

I made a quick example of what I want it to look like

http://oi41.tinypic.com/29xgier.jpg

 

How do I make this? do I have to make seperate images for each button? and then create an image when the user does:

-mouse over

-clicked

-active link

this seems rather 'heavy' and redundant..

 

Another example of what Im trying to make can be viewed at:

www.newground.com

 

I don't want a dropdown menu at this moment; I just want a menu with clickable links

 

Thank you in advance!

[davej]

css sprites...

 

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

[enimy6]

I will give it a shot, thank you

[Hadien]

if its not directly obvious, whats happening is that all those separate icons are actually clumped together in just one image, and its using css to only show a small part of the entire image, like so:

 

 

when you would hover over the link (via a:hover) the css would change to the position to look at to give the new icon look. having all the icons all collected into one image saves a lot of overhead, since the browser only needs to download just one image, and not like 70. also, the hover states will come pre-loaded too. if each state was in it's own image, the browser won't request for a state's image until its actually needed, which seems like an optimization, but can cause little interactive quirks from time to time. for example, depending on how you've set up the css, when you hover over a link the background may not appear to change for a second or so. or even worse you might see a broken image for moment which can defeat the immersion.