Custom checkbox (Use images in place of checkbox)

I'm looking to cre开发者_JAVA技巧ate a custom checkbox.

I would like to display an active/inactive image in place of the checkbox.

I'm limited to using JSF/Richfaces and Javascript if necessary.

I wanted to avoid using javascript but the only thing I could find was OpenFaces 'o:selectBooleanCheckbox' tag.

Is anyone aware of another way I could do this without resorting to Javascript?

Thanks

Easier and good would be javascript.

But anyways you can do it using two different image tag rendering on a boolean condition and changing the value of the variable you bind.

<a4j:outputPanel id="checkbox">
    <h:graphicImage value="path/checkedimage" rendered="#{yourbean.value}">
       <a4j:support event="onclick" action="#{yourbean.ChangeValue}" reRender="checkbox"/>
    </h:graphicImage>
    <h:graphicImage value="path/uncheckedimage" rendered="#{not yourbean.value}">
       <a4j:support event="onclick" action="#{yourbean.ChangeValue}" reRender="checkbox"/>
    </h:graphicImage>
</a4j:outputPanel>

though a little different solution from what you are looking but thought of mentioning it http://jqueryui.com/demos/button/#checkbox jQuery UI just added new button widget.

Would this work?

Inside HTML

<a href="#" onclick="changeMySrc(1)" onMouseover="change_img()" onMouseout="change_back()"><img id="Img1" src="Images/unchecked.gif" /></a>

JavaScript Function

function changeMySrc(i) {
    if (i == 1) {
        var currentImg = document.getElementById("Img1").src;
        if(currentImg.indexOf("unchecked") > 0)
        {
           document.getElementById("Img1").src="Images/checked.gif";
        } else {
           document.getElementById("Img1").src="Images/unchecked.gif";
        }
    } else if (i == 2) {
        var currentImg = document.getElementById("Img2").src;
        if(currentImg.indexOf("unchecked") > 0)
        {
           document.getElementById("Img2").src="Images/checked.gif";
        } else {
           document.getElementById("Img2").src="Images/unchecked.gif";
        }
    }
}