jQuery Drawing Experiment

HTML

<a class="xpop" href="#" data-x="X"> Hello!</a>

CSS

body { cursor: default; }

JavaScript

$(document).ready(function() {
  var draw = false;

  $(document).mousedown(function(){ draw = true; }); // draw on mousedown
  $(document).mouseup(function(){ draw = false; }); // do not draw on mouseup
  jQuery("a.xpop").click(function() {
   alert("Hello world");
  });
  $(document)()
  $(document).mousemove(function(e) {
    if(draw == true) { // if mousedown
      // make a pixel (5X5) at mouse position
      pointer = $('<span>').css({
        'position':'absolute',
        'background-color':'#00f',
        'width':'2px',
        'height':'2px',
        top: e.pageY ,    //offsets
        left: e.pageX   //offsets
      });

      //append it to body
      $(document.body).append(pointer);
    }
  });

});