title: background image movement dependent on mouse position
body: <p>I'm trying to make a background image move in relation to the mouse position within its container, I'm trying to mimic the same effect seen <a href="http://d3js.org/" rel="nofollow">here</a>, their top banner links move in relation to the mouse position so that they are always in view.</p>
  
  <p>I've started to try and calculate this myself but am struggling with the equation that would make it work.</p>
  
  <pre><code>$(function(){
      var container = $('.container');
      var img = $('.container img');
      var ch = container.height();
      var cw = container.width();
      var ih = img.height();
      var iw = img.width();
  
      container.on('mousemove', function(e){
          var x = (e.pageX - container.offset().top)/cw*100;
          var y = (e.pageY - container.offset().left)/ch*100;
          img.css({'left': x, 'top': y});
          $('span').empty().append(x + ' : '+y)
      });
  });
  </code></pre>
  
  <p>I've put together this <a href="http://jsfiddle.net/ThePagan/1vy4gz4z/1/" rel="nofollow">fiddle</a> to show my progress, so far its tracking and updating the image position based on position which is half right, but my aim is to get the mouse to the bottom right corner of the container and see the bottom right of the image.</p>
  
  <p>I'm guessing I need to calculate this based on mouses position from the center of the container but can't figure out the equation.</p>