How to change an image when active to a seperate image?

Question

I would like to do something similar to what was posted here...

Make Twitter Bootstrap navbar link active

Except instead of an item on the navbar becoming bolded, I would like it to use another image when active. From this...

to this...

Answer 1

In the example link you posted, all they're doing is adding a CSS .active class to the active link. If you do the same and have the active class being added to the correct element, you can do something in the css like,

.active{
    background: url('path/to/image.jpg') no-repeat;
}