creating a rollover image change on the nav buttons

I have two images...one for when the mouse is not hovered over a nav button and one for when the mouse is over the nav button. How would I go about making this show up on the actual site? Do I need to write CSS or HTML code and if so how do I start it?

bump

up for this! i also need this! pls some1 help ypur fellow admins..^_^

anyone?? admins should help each other, right?

bump

bump! i need this too

I agree admins should help. I searched for days tryng to find this out and several ppl say its impssible but its not.

Heres the method i made..

To se it in action

Goto Display>>Colors>>Css StyleSheet and type this in

a.mainmenu img {
background-image: url(Button not over image URL);

}
a.mainmenu:hover img {
background-image: url(Button over image URL);

}

All the nav buttons will do th same thing......
To label them i used a png image for the words.. Display>Pics Management>> index ,calender,gallery,ect...

Make sure the buttons are the same size as your png..Button image goes off the label pic size.

Make the text solid wit a transparnt background.

Then your reay to go.

Hope this helps......