Navbar CSS Help

How would I go about making it where my navbar images change to different images when they are hovered over by a mouse?

~Bump

oo this you need some css work

you can view it here :

https://www.youtube.com/watch?v=sN2MWS37l4A&feature=player_embedded

jalokim made it

Youtube doesn't work on my computer, it's crappy but I'm getting a new one soon. @.@
So could anyone please explain it?

Bump~~

The video says:
Delete all the current images for the navbar that are on Pics management.
Set navigation to "images only."

Then go to Colors > CSS and use this:

#i_icon_mini_index {
background-image: url(INSERT URL OF NON HOVER IMAGE);
width: 139px;
height: 107px;
}

#i_icon_mini_index:hover {
background-image: url(INSERT URL OF HOVER IMAGE);
width: 139px;
height: 107px;
}

Notice how it says mini_index.
Change "index" accordingly for each button on the nav bar.
Also, you put the url of the pictures as the correspond with hover.
Change the width and height of the pictures with the above numbers.
You can check a picture's width and height by right clicking it and clicking properties.

Hope this helped.

Thanks, but how do I figure out the classification of each page? Such as 'Index' being the one for forum. Would it just be the page's name?

I think it would be the page's name, but I am not completely sure.
The video gives the following examples:

#i_icon_mini_index
#i_icon_mini_portal
#i_icon_mini_faq
#i_icon_mini_login

I don't know about the other ones, but it would probably just be the page's name. I think we can assume it from those examples.