How To Use Images For Check Boxes Using Css Or May Be Javascript?

It is obviously very simple question but I have never done such thing before. My designer want some thing like this for check boxes (it is on left side. Checked ones are grey and o

Solution 1:

One idea is to use a span with background-image (empty box), hide a related checkbox, and assign a clickhandler to the the span (onclick: change checked attribute of the related hidden checkbox, change background image of the span accordingly).

Here is an example of that

Solution 2:

For this sort of thing i use jQuery UI. An example is here : http://jqueryui.com/demos/button/#checkbox

and some example code:

<script>
$(function() {
    $( "#check" ).button();
    $( "#format" ).buttonset();
});
</script>