JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://i.imgur.com/9BM37Xm.png" id="cursor"/>

X: <input type="text" value="0" id="x" onkeyup="update()">
Y: <input type="text" value="0" id="y" onkeyup="update()">

JavaScript

var CURSORS = [
    "http://i.imgur.com/m1yerkz.png",  //[-1,-1]
    "http://i.imgur.com/wEfBli4.png",  //[-1, 0]
    "http://i.imgur.com/fJRhjLM.png",  //[-1, 1]
    "http://i.imgur.com/blrG7Ba.png",  //[ 0,-1]
    "http://i.imgur.com/9BM37Xm.png",  //[ 0, 0]    
    "http://i.imgur.com/blrG7Ba.png",  //[ 0, 1]
    "http://i.imgur.com/XnvuYDZ.png",  //[ 1,-1]
    "http://i.imgur.com/aOLpi1y.png",  //[ 1, 0]
    "http://i.imgur.com/Arnxsy8.png",  //[ 1, 1]
];


window.update = function() {
    var x = 1*$("#x").val();
    var y = 1*$("#y").val();
    //throw new Error('d');
    x = Math.limit(Math.round(x),1,-1);
    y = Math.limit(Math.round(y),1,-1);    
    
    var i = getOffset(x,y);
    console.log(i);
    $("#cursor")[0].src = CURSORS[i];
}
Math.limit = function(val, max, min) {
    return Math.min(Math.max(val,min), max);
}
function getOffset(x,y) {
    return (x + 1) * 3 + (y + 1);   
}