Hi there! I have a background image I want to change position when I
press the arrow keys. I want the background to move 16 pixels for
every press in the direction I indicate. I can't get this to work,
however. I have jquery installed, as well as the background-position
plugin. Here's my code:

$(document).ready(function() {

        function checkKey(e){
             switch (e.keyCode) {
                case 40:
                    var curX = parseInt($(".test").css("top"));
                    $(".test").css("top", curX += 16);

                    // move background
                    $("#background").css('backgroundPosition', bgCurX -= 16);
                    break;
                case 38:
                    var curX = parseInt($(".test").css("top"));
                    $(".test").css("top", curX -= 16);

                    // move background
                    var bgCurX = parseInt($("#background").css("top"));
                    $("#background").css("top", bgCurX += 16);
                    break;
                case 37:
                    var curX = parseInt($(".test").css("left"));
                    $(".test").css("left", curX -= 16);

                    // move background
                    var bgCurX = parseInt($("#background").css("left"));
                    $("#background").css("left", bgCurX += 16);
                    break;
                case 39:
                    var curX = parseInt($(".test").css("left"));
                    $(".test").css("left", curX += 16);

                    // move background
                    var bgCurX = parseInt($("#background").css("left"));
                    $("#background").css("left", bgCurX -= 16);
                    break;
                default:

                    }
        }

        if ($.browser.mozilla) {
            $(document).keypress (checkKey);
        } else {
            $(document).keydown (checkKey);
        }

});

CSS:
#background {height:600px;width:1000px;border:1px solid
#999;background-image:url("earthbound-bg.gif");background-repeat:no-
repeat;}

On the site, I have it so divs move when I press the arrow keys. That
works, but the background doesn't. :( Any help would be appreciated!

Thanks!

Reply via email to