h:selectOneRadio containing images

Question

I have a h:selectOneRadio tag for displaying a number of radiobuttons:

<h:selectOneRadio value="#{myBean.radioButtonSelection}">
  <s:selectItems value="#{myBean.getPossibleRadioButtonSelections()}" var="rs" label="#{rs.toString}"/>                             
</h:selectOneRadio>

Now, instead of radiobuttons with string values (labels), I would like to have radio buttons with (clickable) images next to it. Is this possible? If so, how?

Update: Actually, there should be both text, and an image with a question mark which shows a modal panel when clicked on it.

Answer 1

You can use <h:outputLabel for="form:radioGroupId:X"> and place a <h:graphicImage> inside. (X is the number of the option)

Of course you would have to have two collections - one with the items, and one with the pictures, and iterate them separately - one with <s:selectItems> and the other with <ui:repeat>. A little tedious.

Answer 2

Your best and most clean bet would be using CSS background images. Alternatively, you can also set itemLabelEscaped="false" and use plain vanilla HTML <img> in item label.