a:hover - using images in text navigation

Question

Hey there!

I'm trying to code my navigation on my portfolio and am looking for a simpler way of doing this than using background position and css sprites.

Basically I want navigation similar to that of this website: http://www.ernesthemingwaycollection.com/ where when you hover over the navigation, a bar appears below it.

Is there a simpler way of doing this or do I have to use background positioning.

Btw, I have used text as my navigation and would rather keep it that way instead of using images for the navigation. I only want to use images for the hover image. I have tried to do this simply by using the following code:

#nav a:hover {
background: url('Images/Nav_Hover.png') no-repeat;
}

However, I can't seem to position the image? Any help?

Thanks in advance!

Answer 1

You don't have to use a sprite, though it's usually more efficient for several reasons.

You can just use an entirely different image, for example:

a { background: url('image.jpg'); }
a:hover { background: url('image-hover.jpg'); }

Be warned that there may be a slight delay in the hover as it loads the image the first time (for remote users, you won't notice this locally with no latency)...so you may want to pre-load these hover images. This is something that sprites by nature take care of, so don't completely toss them out as an option...there are resources to help creating them if that's the concern.

Answer 2

To anwser your question, i think using 1 image with the normal and hover state in it, is not only the easy way, but also the very best way. No preload / delay issues, no browser issues (except for hover not working in ie6).

Sprites for navigation is pretty easy. The positioning is a Bia*** when you use it for all images. Make the hover image as wide as you're widest link, and a little css will do everything.

a.navLink { background:url(image) no-repeat; /* and ofcourse witdh and stuffs */ }
a.navlink:hover { background-position:0px -20px; /* height of button */ }

I dont think it can be easier.. A different way is using javacript, but i wouldn't do that for a hover.

Answer 3

#nav a:hover { 
  background: url('Images/Nav_Hover.png') no-repeat 10px 20px; 
} 

Where 10px is the horizontal positioning and 20px the vertical. Or just use background-position as mentioned before.