Question

I would like to make a checkbox form that has both mouse over image and checked image function with jquery. I successfully made the function but didn’t work properly.

Here is my html form, using foreach. It shows different images on each divs.

        <form name='frm_edit_interest' action='/home/edit_interest' method='POST'>
            <?
                if(count($list) <= 0):
                    echo 'error';
                else:
                    $i = 0;
                    foreach($list as $row):
                        ++$i;
            ?>  
                <div class='w_select_td'>
                    <div class='w_select_title_div'>
                        <span class='w_select_title_text'><?=$row['i_keyword']?></span>
                    </div>
                    <div class='w_select_img_div'>
                        <label for="w_interest" class="imag_box_<?=$row['i_idx']?>">
                            <img src="/images/account/ws_<?=$row['i_idx']?>.png"/ style='cursor:pointer;border:solid 1px #eee;'>
                            <input name="chk[]" value='<?=$row['i_idx']?>' type="checkbox" style="display:none">
                        </label>
                    </div>
                </div>
            <?
                    endforeach;
                endif;
            ?>  

            </div>
            </div>

            <div id='w_next_btn_div'>
                <input id='btn_login' name='btn_login' type='submit' class='button' value='submit' />
            </div>
        </form>

Here is the jquery script:

<script>
$(document).ready(function () {

    var idx = idx

    $('.imag_box'+idx+' img').hover(
         function () {
             if($(this).next().val() !== "1") {
                 $(this).attr('src', '/images/account/ws_'+idx+'_hover.png');
             }
          },
         function () {
             if($(this).next().val() !== "1") {
                 $(this).attr('src', '/images/account/ws_'+idx+'.png');
             }
         }
      );


    $(".imag_box"+idx+" img").click(function() {
        if($(this).next().val() !== "1") {
             $(this).attr("src", "/images/account/ws_"+idx+"_checked.png");
             $(this).next().val("1");
        } else {
             $(this).attr("src", "/images/account/ws_"+idx+".png");
             $(this).next().val("0");
        }
    });
});
</script>

I made different images to load them based on numbers from unique index number. I saved the different image files which include numbers to load easily.

The problem is that I can’t make that when a user put their mouse over the image, the image changes automatically for right image.

So, it has to send unique index number to jquery when users put their mouse over the each image.

Can you give me a suggestion?

Answer 1

have you tried this, getting the index from the value field

<script>
$(document).ready(function () {



    $('.imag_box img').hover(
         function () {
             if($(this).next().val() !== "1") {
                 $(this).attr('src', '/images/account/ws_'+ $(this).val() +'_hover.png');
             }
          },
         function () {
             if($(this).next().val() !== "1") {
                 $(this).attr('src', '/images/account/ws_'+ $(this).val() +'.png');
             }
         }
      );


    $(".imag_box img").click(function() {
        if($(this).next().val() !== "1") {
             $(this).attr("src", "/images/account/ws_"+ $(this).val() +"_checked.png");
             $(this).next().val("1");
        } else {
             $(this).attr("src", "/images/account/ws_"+ $(this).val() +".png");
             $(this).next().val("0");
        }
    });
});
</script>