Mouse Position Interactive Image

Hi,​

I currently have an image which updates according to mouse position. Check out http://www.fore6.com/?p=533 to give you an idea of what I mean.​

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!​

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?​

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.​

Any help would be greatly appreciated. Code I am using is below:​

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] < imageX && mouseCord[1] < imageY){ // Box-1
    $(".anim-photo").css("background-position", aniCord[0]+" 0px");
 
} else if (mouseCord[0] > imageX && mouseCord[0] < imageX+285 && mouseCord[1] < imageY){ // Box-2
    $(".anim-photo").css("background-position", aniCord[1]+" 0px");
 
} else if (mouseCord[0] > imageX+285 && mouseCord[1] < imageY){ // Box-3
    $(".anim-photo").css("background-position", aniCord[2]+" 0px");
 
} else if (mouseCord[0] < imageX && mouseCord[1] > imageY && mouseCord[1] < imageY+357){ // Box-4
    $(".anim-photo").css("background-position", aniCord[0]+" -360px");
 
} else if (mouseCord[0] > imageX && mouseCord[0] < imageX+285 && mouseCord[1] > imageY && mouseCord[1] < imageY+357){ // Box-5
    $(".anim-photo").css("background-position", aniCord[1]+" -360px");
 
}else if (mouseCord[0] > imageX+285 && mouseCord[1] > imageY && mouseCord[1] < imageY+357){ // Box-6
    $(".anim-photo").css("background-position", aniCord[2]+" -360px");
 
} else if (mouseCord[0] < imageX && mouseCord[1] > imageY+357){ // Box-7
    $(".anim-photo").css("background-position", aniCord[0]+" -720px");
 
} else if (mouseCord[0] > imageX && mouseCord[0] < imageX+285 && mouseCord[1] > imageY+357){ // Box-8
    $(".anim-photo").css("background-position", aniCord[1]+" -720px");
 
} else if (mouseCord[0] > imageX+285 && mouseCord[1] > imageY+357){ // Box-9
    $(".anim-photo").css("background-position", aniCord[2]+" -720px");
}
};

Code (markup):

 

Name the images separately (image1, image1X, image1Y, image2, image2X, image2Y, etc.) and pass the image name and coordinates to interact. (Figure out which mouse name and coordinate names to use in lines 4-10, using the mouse coordinates to determine which image the mouse is over.)

 

Hi Rukbat,


Thanks for replying. A bit confused, any chance you could code an example please?
Thanks for your time.

 

I figured it out. I had to loop through the images and use $(this). Thanks for your time and help. Final code is below:

var aniX = null;
    var aniY = null;
   
    image = $('.anim-photo');
       
    $(document).mousemove(function(event) {
        var mousePos = new Array(event.pageX, event.pageY);
        interact(mousePos, ["0px", "-288px", "-576px"]);
    })
   
    function interact(mouseCord, aniCord) {
        image.each(function() {
           
            aniX = $(this).offset().left;
            aniY = $(this).offset().top;
           
            if (mouseCord[0] < aniX && mouseCord[1] < aniY){ // Box-1
                $(this).css("background-position", aniCord[0]+" 0px");
   
            } else if (mouseCord[0] > aniX && mouseCord[0] < aniX+285 && mouseCord[1] < aniY){ // Box-2
                $(this).css("background-position", aniCord[1]+" 0px");
   
            } else if (mouseCord[0] > aniX+285 && mouseCord[1] < aniY){ // Box-3
                $(this).css("background-position", aniCord[2]+" 0px");
   
            } else if (mouseCord[0] < aniX && mouseCord[1] > aniY && mouseCord[1] < aniY+357){ // Box-4
                $(this).css("background-position", aniCord[0]+" -360px");
   
            } else if (mouseCord[0] > aniX && mouseCord[0] < aniX+285 && mouseCord[1] > aniY && mouseCord[1] < aniY+357){ // Box-5
                $(this).css("background-position", aniCord[1]+" -360px");
   
            }else if (mouseCord[0] > aniX+285 && mouseCord[1] > aniY && mouseCord[1] < aniY+357){ // Box-6
                $(this).css("background-position", aniCord[2]+" -360px");
   
            } else if (mouseCord[0] < aniX && mouseCord[1] > aniY+357){ // Box-7
                $(this).css("background-position", aniCord[0]+" -720px");
   
            } else if (mouseCord[0] > aniX && mouseCord[0] < aniX+285 && mouseCord[1] > aniY+357){ // Box-8
                $(this).css("background-position", aniCord[1]+" -720px");
   
            } else if (mouseCord[0] > aniX+285 && mouseCord[1] > aniY+357){ // Box-9
                $(this).css("background-position", aniCord[2]+" -720px");
            }
        })
    };

Code (markup):