title: Compass needle effect. Image stays fixed and rotates according to the position of the mouse
body: <p>I have found a working example of what I am trying to achieve. <a href="http://jsfiddle.net/JFZ7a/" rel="nofollow">http://jsfiddle.net/JFZ7a/</a>.  I tried it insert this function into my web page, but I ran into many issues.  I tried to take this back to the basics and I copied the HTML in a standard empty HTML document body.  I then saved the file as test.html.  I am doing my programming using Arachnophilia.  I then load the page in IE and it shows me the image as it should.  I then inserted the CSS script into the head, a straight one to one copy from jsFiddle.  The CSS positioned the image as it should.  I then inserted the javascript and that is when it showed me that I was doing something wrong.  I have tweeked with this document and for the life of me it will not work.  I have searched for hidden characters by pasting it first into notepad and then copying it out again.  Could someone please look at this and advise me what I am missing, I would be most in your debt.  Here is the code from my page:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;
  &lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" /&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var img = $('.image');
  if (img.length &gt; 0) {
      var offset = img.offset();
  
  function mouse(evt) {
     var center_x = (offset.left) + (img.width() / 2);
      var center_y = (offset.top) + (img.height() / 2);
      var mouse_x = evt.pageX;
      var mouse_y = evt.pageY;
      var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
      var degree = (radians * (180 / Math.PI) * -1) + 90;
      img.css('-moz-transform', 'rotate(' + degree + 'deg)');
      img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
      img.css('-o-transform', 'rotate(' + degree + 'deg)');
      img.css('-ms-transform', 'rotate(' + degree + 'deg)');
  }
  $(document).mousemove(mouse);
  }
       &lt;/script&gt;  
       &lt;style type="text/css"&gt;
       #apDiv1 {
  position:absolute;
  width:400px;
  height:327px;
  z-index:1;
  left: 105px;
  top: 98px;
  }  
  &lt;/style&gt;  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="apDiv1"&gt;
   &lt;img src="http://i347.photobucket.com/albums/p472/lcope24/corgi.jpg" class="image" /&gt;
   &lt;br&gt;(Not actual picture I'm trying to rotate, but it'll do for now)&lt;/div&gt;
   &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>