Navigation rollovers

For solid colors you can use plain CSS but I believe the technique your looking for is called CSS Sprites.

 

that website was done in flash

to my knowledge you can make the navigation item that the mouse is hovering over change color, but you cannot make it change color and also have every other image change as well just using CSS

could be wrong though...

 

Ah, a reverse focus kind of. Though I've never seen someone do it and never thought to try, it is possible. Here's a simplistic example.

HTML:

<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
</ul>

Code:

ul {
 margin: 0; padding: 0;
}
li {
 display: inline;
 margin: 0; padding: .2em .5em;
 background: #eee;
 border: 1px solid #00f;
}
ul:hover li {
 background: #99f;
 border: 1px solid #f00;
}
ul li:hover {
 background: #eee;
 border: 1px solid #f00;
}

It may not completely work right with IE6/7. Not up for testing, but it does work in Firefox and Safari.

Edit: OK, tested IE6 real quick and as expected, it doesn't work. It's because IE6 only recognizes the :hover on the a tag. I don't have IE7 to check.

 

Have a background image similar to this:

====Dark Green=====| Light Green |====Dark Green=====

make sure its as long as every menu item on each side then use the CSS property background position to move the background image left or right, the effect will be that one item will be light green while the rest will be dark green.

Should work.