Mouse position interactive image
<p>I currently have an image which updates according to mouse position. Check out [http://www.fore6.com/?p=533][1]</p>

<p>[1]: <a href="http://www.fore6.com/?p=533" rel="nofollow">http://www.fore6.com/?p=533</a> to give you an idea of what I mean.</p>

<p>The issue is that I have multiple images that I need to apply this to, and each image needs to animate independently of the other. At the moment they all animate at the same time, i.e; they need to animate independently because the mouse position will be different for each image!</p>

<p>I can get it working by repeating the function for each image and changing the variables, but that is an awful lot of code. How can I do this within one function?</p>

<p>I'm guessing that I may need to put each image into an array or use $(this), but can't seem to figure out how to implement it.</p>

<p>Any help would be greatly appreciated. Code I am using is below:</p>

<pre><code>var imageX = null;
var imageY = null;

imageX = $('.anim-photo').offset().left;
imageY = $('.anim-photo').offset().top;

$(document).mousemove(function(event) {
    var mousePos = new Array(event.pageX, event.pageY);
    interact(mousePos, ["0px", "-288px", "-576px"]);
})

function interact(mouseCord, aniCord) {
    if (mouseCord[0] &lt; imageX &amp;&amp; mouseCord[1] &lt; imageY){ // Box-1
    $(".anim-photo").css("background-position", aniCord[0]+" 0px");

} else if (mouseCord[0] &gt; imageX &amp;&amp; mouseCord[0] &lt; imageX+285 &amp;&amp; mouseCord[1] &lt; imageY){ // Box-2
    $(".anim-photo").css("background-position", aniCord[1]+" 0px");

} else if (mouseCord[0] &gt; imageX+285 &amp;&amp; mouseCord[1] &lt; imageY){ // Box-3
    $(".anim-photo").css("background-position", aniCord[2]+" 0px");

} else if (mouseCord[0] &lt; imageX &amp;&amp; mouseCord[1] &gt; imageY &amp;&amp; mouseCord[1] &lt; imageY+357){ // Box-4
    $(".anim-photo").css("background-position", aniCord[0]+" -360px");

} else if (mouseCord[0] &gt; imageX &amp;&amp; mouseCord[0] &lt; imageX+285 &amp;&amp; mouseCord[1] &gt; imageY &amp;&amp; mouseCord[1] &lt; imageY+357){ // Box-5
    $(".anim-photo").css("background-position", aniCord[1]+" -360px");

}else if (mouseCord[0] &gt; imageX+285 &amp;&amp; mouseCord[1] &gt; imageY &amp;&amp; mouseCord[1] &lt; imageY+357){ // Box-6
    $(".anim-photo").css("background-position", aniCord[2]+" -360px");

} else if (mouseCord[0] &lt; imageX &amp;&amp; mouseCord[1] &gt; imageY+357){ // Box-7
    $(".anim-photo").css("background-position", aniCord[0]+" -720px");

} else if (mouseCord[0] &gt; imageX &amp;&amp; mouseCord[0] &lt; imageX+285 &amp;&amp; mouseCord[1] &gt; imageY+357){ // Box-8
    $(".anim-photo").css("background-position", aniCord[1]+" -720px");

} else if (mouseCord[0] &gt; imageX+285 &amp;&amp; mouseCord[1] &gt; imageY+357){ // Box-9
    $(".anim-photo").css("background-position", aniCord[2]+" -720px");
}
};
</code></pre>
