title: How to define specific boundaries within a div while using the mousemove function
body: <p>I want to be able to have a small marker follow the movement of the mouse while being refined to a certain shape that's <strong>not</strong> a perfect rectangle. I am working from an existing jsfiddle that I found did very close to what I want, but not exactly what I need. <br><br>Here is where I am right now: <a href="http://jsfiddle.net/twjeffer/3964w/1106/" rel="nofollow">http://jsfiddle.net/twjeffer/3964w/1106/</a> 
  <br><br>The issues with the above, I am trying to keep the yellow dot within the T shape, not the entire div. My own thoughts on how to make this work was either <br>A) working with 2 different divs that make up the "T", or<br>
  B) define the boundaries of the yellow marker by the "T" shape.<br><br> I have been stuck on this for a while, any help or advice would be appreciated! </p>
  
  <pre><code>var mouseX = 0, mouseY = 0, 
  
          limitX = $('.container').width() - 15,
              limitY = $('.container').height() - 15;
  
  $(window).mousemove(function(e){
    var offset = $('.container').offset() ;
     mouseX = Math.min(e.pageX - offset.left, limitX);
     mouseY = Math.min(e.pageY - offset.top, limitY);
     if (mouseX &lt; 0) mouseX = 0;
     if (mouseY &lt; 0) mouseY = 0;
  });
  
  // cache the selector
  var follower = $("#follower");
  var xp = 0, yp = 0;
  var loop = setInterval(function(){
      // change 12 to alter damping higher is slower
      xp += (mouseX - xp) / 30;
      yp += (mouseY - yp) / 30;
      follower.css({left:xp, top:yp});
  
  }, 30);
  </code></pre>
  
  <p>Thanks</p>