Updated

<!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
        background-image: url("Images/desert.png");
        background-repeat:no-repeat;
        background-position:center;
        background-attachment:fixed;

        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    #cowboy {
        position:absolute;
        left:100px;
        top: 700px;
    }
    </style>
    <script>
    var pic1=new Image()
    pic1.src="./Images/run1.png"
    var pic2=new Image()
    pic2.src="./Images/run2.png"
    var pic3=new Image()
    pic3.src="./Images/run3.png"
    var pic4=new Image()
    pic4.src="./Images/run4.png"

    function getValue() {
        var dest_x = document.getElementById('txtChar').value;
        alert(dest_x);
    }
    </script>
    </head>
    <body>

    <form name="form" action="" method="GET">
        <h2>Enter the the distance Joe the Cowboy shall move.</h2>
        <input id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar" />
        <input id="btnMove" type="button" value="GO!" onclick="var t=setInterval('moveRight()', 80); getValue();" />
    </form>
    <div id="cowboy" >
        <img src="Images/run1.png" name="animation" />
    </div>

    <script>
    var counter=1
    function animate() {
        if (!document.images) return;
        document.images.animation.src= "pic" + counter + ".src";
        if (counter < 4) {
            counter++;
        } else {
            counter=1;
        }
        setTimeout("animate()",100)
    }

    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
               return false;
        }

        return true;
    }

    var x = 100;
    var y = 700;

    var dest_y = 700;
    var interval = 10; //Move 10px every initialization

    function moveRight() {
        var dest_x = document.getElementById('txtChar').value;
        //Keep on moving the image till the target is achieved
        if(x<dest_x) x = x + interval;
        if(y<dest_y) y = y + interval;

        //Move the image to the new location
        document.getElementById("cowboy").style.top  = y+'px';
        document.getElementById("cowboy").style.left = x+'px';

        if ((x+interval < dest_x) && (y+interval < dest_y)) {
            //Keep on calling this function every 100 microsecond
            //      till the target location is reached
            window.setTimeout('moveRight()',100);
        }
    }

    animate()
    </script>
    </body>
    </html>