making button tabs stick

supernatural_247 · #1 (**permalink**) 08-28-2005, 04:21 PM

I'm using php and I have my index page including the header file. In that header is the code for the title, metatags, logo, and top navigational buttons.

i'm trying to figure out how to make it so that when a user clicks a nav button, it switches the image to a new image... see www.careerbuilder.com as an example.

btw, didn't know which forum would be best to discuss this so i posted this in design as well...

thanks in advance!!
Tim

Steve W · #2 (**permalink**) 08-28-2005, 07:37 PM

If you're using css for styling it's pretty simple:

Give each page body a unique id e.g. <body id="home"> for home page and <body id="contact"> for contact page etc...

Then give each tab of your nav a unique id also, so if you're using lists, <li id="home_tab"><a ... /a> or if just using links, <a href="/" id="home_tab" .../a>

In your css file, set the background as you see fit like so:

body#home #home_tab { background:#aaaaaa url(/path/to/image/if/reqd) 50% 50%; }

body#contact #contact_tab {.....}

The #aaaaaa is the hex bg color.
The url(...) is an image if you want to use one.
The 50% 50% means half way along, half way down to centre a background image...

Using css the possibilities are endless, you could always use js rollovers but they're not so SE friendly and only work if js is turned on in the browser...