Navigation rollovers

[phadam]

Pretty quick question here. Completely new to web design and just doing this for myself. I made the template for the site in photoshop. Got the slicing and rollovers on the navigation bar. However, I still think that the nav bar is a little plain.

Working in Dreamweaver and currently I have blue buttons on the nav bar and when you mouse over it switches to a lime green color. Could someone explain to me a how to: on keeping the original blue, and on mouse over switching to lime green for the active button and the rest to a low or dark lime green for the remaining buttons (the inactive buttons) that are not being moused over..

hope that makes sense

Thanks

 

[web_god61]

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

 

[phadam]

here is a link to what i am looking for.
would this be done with css sprites??

 

[samwich]

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...

 

[angelwatt]

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.

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

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.

 

[web_god61]

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.