javascript - track mouse position to move images -

i have pretty simple page.

<div id="index">     <img /> </div> 

the styling pretty simple too.

#index {position:relative;} #index img {position:absolute; bottom:10%; right:10%; width:100%;} 

i use % image can resized proportionally if browser window resizes. never mind that.

the problem is, i'm trying emulate effect on flash site : http://www.tatogomez.com/ image in bottom right of screen. when move mouse top left, image move bit more right bottom. when move mouse center, image revert original position. it's kinda i'm giving shadow/lighting effect mouse lighting , image object, except need moving animation.

my code this

$(document).ready(function($){     $('#index').mousemove(         function(e){             $(this).children('img').each(                 function(){                     var totalwidth = $(window).width();                     var totalheight = $(window).height();                     var centerx = $(window).width() / 2;                     var centery = $(window).height() / 2;                      var mousex = e.pagex;                     var mousey = e.pagey;                      var current_top = $(this).offset().top;                     var current_left = $(this).offset().left;                      var myx =  (centerx-mousex)/centerx;                     var myy =  (centery-mousey)/centery;                     var cssobj = {                         'left': current_left + myx + 'px'                         'top': current_top + myy + 'px'                     }                     $(this).css(cssobj);                 }             );          }     ); }); 

so if move mouse in relation center of screen. it's this:

centerx = 700 (i use resolution 1400); currentleft = ~200 (the offset left of image)  if mouse position @ 700-1400, myx 700(centerx) - 900(mouse position) = -200 / 700 = ~ -0.3. add css calculation, left current_left(200) + myx(-0.3) px = 197.7px. 

then realizes if move mouse center right (700-1400 range), image move left, when move mouse right center, image still moves left! should move right original position, doesn't because web doesn't know whether mouse moves right center or center right.

any help?

i toyed quickly, it's lacking looping through images .each might mouse movement calculations. rather being hardcoded, movement divider should based on z-index, since lower z-index items move more.

in demo, initial placement incorrect until mouse over.

demo here: http://jquerydoodles.com/stack_question.html

hope helps!

css:

    #index { position: relative; border: 2px solid #ccc; height: 400px; }     #index img { position: absolute; background-color: #fff; border: 1px solid #666; padding: 6px; }     #image1 { z-index: 3; }     #image2 { z-index: 2; width: 150px; left: 200px; }     #image3 { z-index: 1; width: 100px; left: 300px; }     #image4 { z-index: 2; width: 150px; left: -200px; }     #image5 { z-index: 1; width: 100px; left: -300px; } 

html

<div id="index"> <img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image1" alt="" /> <img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image2" alt="" /> <img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image3" alt="" /> <img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image4" alt="" /> <img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image5" alt="" /> </div>

jquery:

$(document).ready(function($){             $("#index").mousemove(function(e){                 var mousex = e.pagex - $('#index').offset().left;                 var mousey = e.pagey - $('#index').offset().top;                 var totalx = $('#index').width();                 var totaly = $('#index').height();                 var centerx = totalx / 2;                 var centery = totaly / 2;                 var shiftx = centerx - mousex;                 var shifty = centery - mousey;                  var startx = ($('#index').width() / 2) - ($('#image1').width() / 2);                 var starty = ($('#index').height() / 2) - ($('#image1').height() / 2);                  $('#image1').css('z-index') ;                 $('#image1').css({ 'left': startx + (shiftx/10) + 'px', 'top': starty + (shifty/10) + 'px' });                 $('#image2').css({ 'left': startx + 220 + (shiftx/8) + 'px', 'top': starty + 50 + (shifty/8) + 'px' });                 $('#image3').css({ 'left': startx + 370 + (shiftx/6) + 'px', 'top': starty + 60 + (shifty/6) + 'px' });                 $('#image4').css({ 'left': startx - 100 + (shiftx/8) + 'px', 'top': starty + 50 + (shifty/8) + 'px' });                 $('#image5').css({ 'left': startx - 150 + (shiftx/6) + 'px', 'top': starty + 60 + (shifty/6) + 'px' });             });         });