Question

I have the following piece of jQuery

$(document).ready(function(){
        var vH=$('#background').height();
        var vW=$('#background').width();
        var vT=$('#background').offset().top;
        var vL=$('#background').offset().left;
        $('#test').mousemove(function(e){
            var ypos=e.pageY-vT;
            var xpos=e.pageX-vL;
            var y=Math.round(ypos/vW*1500);
            var x=Math.round(xpos/vH*200);
            $('#test').val(x+' , '+y);
            $('#background').css({backgroundPosition: x+'% '+y+'%'});
        });
    });

It moves the background when I move my mouse over the div with id=”test”. Now I want to change it so the background is moving no matter where you are moving the mouse over.

So is there a way to do this? Or is it possible to use multiple divs so you get something like:

$('#test', '#test2').mousemove(function(e){

I really appreciate your help!

Answer 1

Try this

$(document).ready(function(){
        var vH=$('#background').height();
        var vW=$('#background').width();
        var vT=$('#background').offset().top;
        var vL=$('#background').offset().left;
        $(document).mousemove(function(e){
            var ypos=e.pageY-vT;
            var xpos=e.pageX-vL;
            var y=Math.round(ypos/vW*1500);
            var x=Math.round(xpos/vH*200);
            $('#test').val(x+' , '+y);
            $('#background').css({backgroundPosition: x+'% '+y+'%'});
        });
    });