How would I make it so that my navigation bars change when you scroll over them?

I would like to know how I could make my navigation menu's buttons change when they are scrolled over. I have both sets ready (Regular buttons, and the scroll over buttons) so I just need to know how to do it if possible.

Here's an example two of the images side-by-side:

Regular------Scrollover



Thank you all for your time and help.

you will have to make cutum buttons with a mouse over.

here's one way to do it over at cool text.com there are a few other ways too so i would wait for a couple other people to reply so you have a few different options.
but you can check this out in the mean time if you like.

be sure to choose the effect for mouse over.
http://cooltext.com/Buttons

kirk wrote:you will have to make cutum buttons with a mouse over.

here's one way to do it over at cool text.com there are a few other ways too so i would wait for a couple other people to reply so you have a few different options.
but you can check this out in the mean time if you like.

be sure to choose the effect for mouse over.
http://cooltext.com/Buttons

Thank you, I'll check it out.


Does anyone know how I could do it with the buttons I created?




Edit: Question,

Is it possible for me to create the mouseover navigation bar through the CSS script?

Bump,


Any help?


Am I able to use my own images to do this?

I tried this a while back myself and it wouldnt work. So I just gave up :p Maybe someone will post how to do it ... if possible.

Hello,

You can change it with CSS. Tell me what forum version you use and what hover effect you want on nav bar?

ankillien wrote:Hello,

You can change it with CSS. Tell me what forum version you use and what hover effect you want on nav bar?

First off thank you for your help. It's greatly appreciated.


I use phpBB3 and these are the examples of the navigation button's scrollover effect:

This:


To change to this:

Try adding this code to Admin CP > Display > Colors > CSS
Add this code there and submit...

Code:

a.mainmenu img {
   -khtml-opacity : 0.7;
   -moz-opacity : 0.7;
   filter : alpha(opacity=70);
   opacity : 0.7;
   }
a.mainmenu:hover img {
   -khtml-opacity : 1;
   -moz-opacity : 1;
   filter : alpha(opacity=100);
   opacity : 1;
   }

Thank you so much! I love it!

Merry Christmas!

Mods can lock this now.

Merry Christmas

Solved > Locked