How to rotate image in relation to mouse position?

Question

I'm trying to do this effect: http://metatroid.com/articles at the top of the page but I can't get it to rotate with just the code they given.

 var img = $('.image');
 if(img.length > 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);
 }

So I put this code under my javascript function and changed my image class to 'image' but it still wouldn't rotate.

Is there any other jquery or css markup associated with this or any tips you can give me to make this work? I'm still kind of new to this so any help is really appreciated. Thank you.

UPDATE: I managed to get the rotate effect to work, but it wouldn't rotate on the right axis. Here's the url for what I'm working on: http://www.lifetime-watches.com/test/i_watches.html

How do I move the axis/pivot so it'll work perfectly?

Answer 1

Problem is that you only define the function mouse, and only set the event handler, if img.length is > 0. The script is located in the head, and executed before the body can load, so there is no image.

Fix - move the script into the body of the document after the where the image is defined. Also, your fiddle doesn't include jQuery (mootools instead). Once you fix those two things it will work.