attaching div to a specific element for showing with javascript

Question

Clicking on the image should show div near it (.show() in jQuery).

But how can i attach div to that image? Is it done with pure css, or javascript?
I tried several "position:absolute", but can't attach it near image.

How it should be done?

Answer 1

It's pretty straightforward, you need to compute the .css({top:___,left:___}) such that the underlines are filled with computations based on the clicked image's .position().top and .position().left.

Answer 2

something like this:

     $(document).ready(function() {
        $('#someim').click(function() {
            showDiv($(this), $('#somediv'));
        });
    });
    function showDiv(sender, object) {

        var pos = $(sender).offset();
        var width = $(sender).width();

        $(object).css({ "left": (pos.left + width) + "px", "top": pos.top + "px" });

        $(object).show();
    }
    <img id="someim" width="250" height="61" alt="Stack Overflow" src="http://sstatic.net/so/img/logo.png"&gt;
    <div id="somediv" style="display:none; margin-left:10px; color:Red">sd</div>