How can I display the checkbox over the images for selection?

Question

I want to display a checkbox for selection on the right bottom of every image..

How can i do something like this?

Please remember that clicking on image has

Answer 1

This can be done with pure CSS, assuming you have fixed width and height for all images. The trick is setting absolute position for the checkbox then assign bottom and right to zero.

HTML sample:

<div class="container">
    <img src="image1.jpg" /> 
    <input type="checkbox" class="checkbox" id="check1" />
</div>
<div class="container">
    <img src="image2.jpg" />
    <input type="checkbox"  class="checkbox" id="check2" />
</div>

CSS:

.container { position: relative; width: 100px; height: 100px; float: left; margin-left: 10px; }
.checkbox { position: absolute; bottom: 0px; right: 0px; }

Live test case.

As for click events, just apply click handler to each checkbox and it will work just fine.. see in this updated fiddle.

Answer 2

If only selecting/dis-selecting of the checkbox is your requirement then What I would suggest is as under :

Step 1: Place the image and the checkbox inside a block (may it be a div or table)
Step 2: Provide that block relative position with some specific height and width.
Step 3: For checkbox, give it absolute position and set the right and bottom gaps (based on your requirement).

For instance, the code should look like this

    <div class="img_block">
                <img src="image-path" alt="" />
        <input type="checkbox" class="chkbox" />
    </div>
    <div class="img_block">
        <img src="image-path" alt="" />
        <input type="checkbox" class="chkbox" />
    </div> 

And the css for the same is

.img_block {position:relative; width:230px; margin-right:20px; margin-bottom:10px; height:30px;}
.chkbox {position:absolute; right:5px; bottom:3px;}

I hope this suits your requirement.

Answer 3

If it were me I would try usign jQuery for this.Lets pretend that each image is in each own div and the checkbo has an id of check:

  $('div').click(function()

    { 
         //you select the checkbox and ad the code to do what you want to it

       ('#check').

    });