How to put check-boxes over an image the way is pointed in this image?

Hi Experts!

Do you know how to put functional check-boxes over an image the way is pointed in this image?
(since its possible)

img001
Thanks in advance!
Eduardo FuerteDeveloper and AnalystAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zac HarrisSystems Administrator Commented:
This can be done with 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:
<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>

Open in new window


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

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dave BaldwinFixer of ProblemsCommented:
If the image is a background image for that element, you can put anything you want over it.
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Hello
I'm going to see this as my new activity...  just a little more time!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Eduardo FuerteDeveloper and AnalystAuthor Commented:
Hello

But how to embed the picture as a background?

Here is the way the check box are presented

img001
By using this code

<style type="text/css">
.checkboxes label {
    display: block;
    float: left;
    padding-right: 10px;
    white-space: nowrap;
}
.checkboxes input {
    vertical-align: middle;
}
.checkboxes label span {
    vertical-align: middle;
}
</style>

<img src="<?php echo base_url('xxxxxx/img/Filtro_de_Visualizacao_2.png')?>" width="821" alt="filtro" title="FILTRO VISUALIZACAO"/>

<form>
    <div class="checkboxes">
        <label for="ppais"><input type="checkbox" id="ppais" /> <span>PPAIS</span></label>
        <label for="pnae"><input type="checkbox" id="pnae" /> <span>PNAE</span></label>
    </div>
</form>

Open in new window

0
Zac HarrisSystems Administrator Commented:
You will need to open a new question for this Question. Your original post was how to put functional check boxes over an image. These are two separate things. Combining questions like that hinders searches. However it can easily be done with CSS.
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Sorry, but for me the doubt is still the same since, accordingly with the picture above, I want to put the check box over the picture.
0
Zac HarrisSystems Administrator Commented:
The difference is you originally asked how to put check boxes over an image not how to embed an image as the background. These are in fact two separate things.

In the future, please separate your questions.

Give me a little bit and I will provide an example of what you are looking for.
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Ok, now I captured what you mean. You're right.
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Returning back to your first reply

I put 04 images like I guess you suggested (very poor design)

img001
<style type="text/css">
    .container { position: relative; width: 100px; height: 100px; float: left; margin-left: 10px; }
    .checkbox { position: absolute; bottom: 0px; right: 0px; }
</style>

<img src="<?php echo base_url('assets/img/Filtro_de_Visualizacao_3.png')?>" align="left" alt="filtro" title="FILTRO VISUALIZACAO"/>

<div class="container">
    <!--img src="image1.jpg" /-->
    <img src="<?php echo base_url('assets/img/todos.png')?>" align="left"/>    
    <input type="checkbox" class="checkbox" id="check1" />
</div>
<div class="container">
    <!--img src="image2.jpg" /-->
    <img src="<?php echo base_url('assets/img/ppais.png')?>" align="left"/>    
    <input type="checkbox"  class="checkbox" id="check2" />
</div>

<div class="container">
    <!--img src="image2.jpg" /-->
    <img src="<?php echo base_url('assets/img/pnae.png')?>" align="left"/>    
    <input type="checkbox"  class="checkbox" id="check3" />
</div>

Open in new window

The resut is still not  the  expected.
0
Zac HarrisSystems Administrator Commented:
As I said before, your question changed from the original post. Therefore, the code provided in my original response will need to be altered to accommodate your new scenario....
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Just to clear the question:

I thought the reason of the diference is caused because

1. one image is background and all the checkbox controls are put over it
2. the images are put each by side of the other and the checkboxes is put each over one image.

Could you please clear in what scenario your first reply fits?
0
Zac HarrisSystems Administrator Commented:
My first reply shows you some example code on how to put a checkbox over an image. I don't have your complete code so I couldn't supply you with the exact code. (Doing the coding for you wouldn't be a freebie anyways :)  )

You don't have to put the images in at all. The only reason for the images is to show that a checkbox can indeed go over the top of an image using CSS.

You would of course need to alter the code in the example to fit your scenario as exact location depends on your layout.
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Accordingly with the evidences your code doesn't put a checkbox over an image. If so, I could go on understanding and  adapting it to my needs with my own efforts and complete the rest of the code.
0
Zac HarrisSystems Administrator Commented:
Actually my code does in fact put a checkbox over an image, I tried it myself.

I will contact some of the other people I know on here to assist you further. Have a nice day.
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Ok, I'm anxiously expecting.
Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.