H: selectOneRadio containing images

Question

I have an h: selectOneRadio tag to display a number of radio objects:

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

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

Update: In fact, there should be both text and an image with a question mark that shows the modal panel when you click on it.

Answer 1

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

, : , - <s:selectItems>, - <ui:repeat>. .

Answer 2

CSS. , itemLabelEscaped="false" HTML <img> .