How do I put a <div> box around my cursor on click?

Question

I am trying re-create the facebook tagging functionality, where you click on an image and the part of the image you click on displays an empty box (or a square).

Using jQuery, how do I make the box appear around my cursor on the click?

Thanks

Answer 1

Something like this might be able to help you, where "image" is the class of image that is taggable and "box" is the ID of an absolutely position element:

$(".image").click(function(e){
    $("#box").css('top',e.pageY).css('left',e.pageY);   
});

Answer 2

$(function(){
  $(document).click(function(e){
    $("<div>").
      text("Foo").
      css({ position: "absolute", top: e.pageY, left: e.pageX }).
      appendTo(document.body);
  });
});

You can find more information about jQuery event objects in their docs for events. In this example, I am using event.PageX and event.PageY.

Answer 3

Ugly code warning:

<script type="text/javascript">
  $(document).ready(function() {
    $("#image-wrapper").click(function(e){
      var ele = $("<div>");
      ele.css({width:"50px", height:"50px", border:"1px solid green", position:"absolute", left: e.pageX - 25, top: e.pageY -25});
      $("body").append(ele);      
   }); 
  });
</script>

<div id="image-wrapper" style="border: 1px solid red; width: 300px; height: 200px;">
</div>