Menu link image change when I click the button

[ToT Ty]

So I have these graphic buttons on my menu. They have 2 versions of them, 1 active and 1 inactive image. When I click on for instance the "forum" button, I would like my "inactive" image on that link, to become "active", and the "Index active" button, to become inactive.

This is how the buttons look in the menu:

<h:outputLink value="faces/forum.xhtml">  
<h:graphicImage value="resources/graphics/Button-Forum-inactive.jpg" />  
</h:outputLink>  

When I click that link I want the
resources/graphics/Button-Forum-inactive.jpg
to become
resources/graphics/Button-Forum-active.jpg

and the currently used Index-active.jpg to become Index-unactive.jpg

Is there any "easy" way to do this?

[J Miller]

I've accomplished things like this before using the "rendered" attribute tied to a boolean value in a backing bean. For example, you could say:

<h:outputLink value="faces/forum.xhtml">    
    <h:graphicImage value="resources/graphics/Button-Forum-active.jpg" rendered="#{myBean.active}" />
    <h:graphicImage value="resources/graphics/Button-Forum-inactive.jpg" rendered="#{myBean.inActive}" />
</h:outputLink> 

That's how I've accomplished this before.

Hope that helps

[ToT Ty]

Yes! That is perfect. A great way to solve it. I am having a few troubles making the myBean tho