checkbox image form with jquery
<p>I would like to make a checkbox form that has mouse over image and checked image function with jquery.</p>

<p>I successfully made each function but didn't work together.</p>

<p>here is my html form.</p>

<pre><code>&lt;label for="w_interest"&gt;
    &lt;img src="/images/account/w_select.png_img"/ style='cursor:pointer;'&gt;
    &lt;input name="w_interest" type="checkbox" id="w_interest" style="display:none"&gt;
&lt;/label&gt;
</code></pre>

<p>here is jquery </p>

<pre><code>$(document).ready(function () {
  $('#w_interest').hover(
    function () {
        $('img', this).attr('src', '/images/account/w_select_hover.png');
    },
    function () {
        $('img', this).attr('src', '/images/account/w_select.png');
    }
  );

    $("#w_interest").change(function() {
       if(this.checked) {
           $(this).prev().attr("src", "/images/account/w_select_checked.png");
       } else {
           $(this).prev().attr("src", "/images/account/w_select.png");
       }
    });

});
</code></pre>

<ol>
<li><p>when a user move their mouse pointer on the image, the image changes to mouse over image.</p></li>
<li><p>when he or she clicks the image, it changes to checked image. (of course, it checks the checkbox)</p></li>
</ol>

<p>Can you help me to combine these two functions to make it happen?</p>
