Question

I am currently working for a survey project. I have seen image questions in some surveys.
i want to implement it in my project. so i have thought like this.

here is my code.

<div  id="image1"    onclick="Imagecheckbox(this);">
    <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" />
</div>
<div  id="image2"    onclick="Imagecheckbox(this);">
   <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" />
</div>
 <div  id="image3"    onclick="Imagecheckbox(this);">
    <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" />
</div>

so when i click on any image i want to show some thing like this.

so i am creating a div dynamically and appending to this. but its not working.
here is my code.

   function Imagecheckbox(div) {
        var clickeddiv = $('#' + div.id);
        $("<div id='mydiv' style='background:yellow;z-index:1;height:100;width:100;align:right;vertical-align:bottom;etc...'></div>").appendTo($(clickeddiv)); 
    }

How can i do this ?
thanks.

Answer 1

First of all, avoid the use of onclick attributes. If you already have included jQuery on your page, you may as well make best use of it.

To achieve this you need to add position: relative; to your div elements which contain the images, and position: absolute to the div which contains the ticks.

HTML

<div id="images">
    <div>
        <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" />
    </div>
    <div>
        <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" />
    </div>
    <div>
        <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" />
    </div>
</div>

jQuery

var $tick = $("<div />").addClass("tick");
$("#images div").click(function() {
    if ($(this).find(".tick").length) {
        $(this).find(".tick").remove();
    }
    else {
        $(this).append($tick);
    }
});

CSS

#images div {
    position: relative;
}
#images div .tick {
    background-image: url('tick.gif');
    bottom: 0;
    right: 0;
    width: 25px; /* amend as needed */
    height: 25px; /* amend as needed */
    position: absolute;
}