Rollover buttons question

[ajia]

Just starting so I hope this isn't a silly question.
I am trying to get a rollover button to keep it's 'active' state when on that page.
I have a 3-part rollover image, green with shadow at the top for the normal setting, green with shadow at the bottom for the 'hover' state, then red with the tinting in the middle in the 'active' state.
I have multiples of these in a div already, with different wording on top to identify the link.
I would like to keep the 'active' state of the button when it's on that page.
I know I can create a image of the red button and add text on top in PS.
My issue is that, from what I have read online, I need to create a div for this.
Since these are already in a div, adding another div rearranges everything.
Is there an easy way to do this? or am I stuck with the 'old' PS way?

[Dava1986]

.menu a{
background:url(yourimage.png") no-repeat scroll 0 0 transparent;
height:19px; /* Image Height*/
width: 100px; /* Image Width */
}
.menu a:hover{
background:url(yourimagehover.png") no-repeat scroll 0 0 transparent;
height:19px; /* Image Height*/
width: 100px; /* Image Width */
}
.menu .current{
background:url(yourimagecurrrent.png") no-repeat scroll 0 0 transparent;
height:19px; /* Image Height*/
width: 100px; /* Image Width */
}

somthing like this is what you want if you want to do it in CSS

[ajia]

dava, again, sorry if this elementary, but in you code would I need 3 different image (button) files or just one?
In other words if my image is called 'button', would that one file be recognized as 'button.png' (that one is obvious), 'buttonhover.png', & 'buttoncurrent.png'??
I am trying it to see if I can figure this all out.

Thanks

[auntnini]

Don't use different IMAGES. Use CSS to style different APPEARANCE of one button for anchor a {} and pseudo classes a:link {} a:visited {} a:hover {} a:focus {} a:active. Then create another .class (such as .current or .here) and add that to link for current page

 <ul id="navbar">
    <li id="home"><a href="../index.html">Home</a></li>
    <li id="office" class="here"><a href="#nogo">Office</a></li>
    <li id="staff"><a href="../staff/index.html">Staff</a></li>
...</ul>

P.S. The links could have different background-images

[donatello]

Give up the rollover buttons and go for CSS Sprites!

See my post here:
http://www.webdeveloper.com/forum/sh...d.php?t=263086

Here is an example of what you can do with them:
http://jsfiddle.net/hxzRq/1/

(The JavaScript is for the tooltip under the buttons - the CSS Sprite does not need JavaScript by itself!)