CSS Sprites

[Xtremer360]

Trying to figure how how to turn my nav bar into where if you hover over one of the parts of the nav bar it turns into the highlighted version of that part.

 

Web Site: http://kansasoutlawwrestling.com/v3/index.php

 

Nav Bar: http://kansasoutlawwrestling.com/v3/images/nav.png

 

Highlighted Nav Bar: http://kansasoutlawwrestling.com/v3/images/nav2.png

[Dennis1986]

You need to split the entire picture into seperate HTML elements.

Then use the style 'background-image: ...' on each element.

 

For the effect you can use :hover in your css.

 

This should explain everything:

http://themes.cmsmadesimple.org/Howto/Image_menu.html

[lostprophetpunk]

You just need to combine your nav and hover nav picture, put the nav hover underneath so it is a total of 428px in height.

 

You can then set each of the buttons to the background-position, then when you need to hover you just need to change it so it shows the hover one.

 

This this article on css tricks should give you a helping hand on any info you need about css sprites.