根据光标位置显示不同的图像

Question

我试图根据页面上的光标位置显示五个不同的图像，仅在x轴上显示。将正在切片的页面划分为五个垂直列，并在每列中显示另一个图像。

这是我的HTML :(头部导入的jQuery）

<img src="../images/kopf/front.png" id="front">
<img src="../images/kopf/links1.png" id="left1">
<img src="../images/kopf/links2.png" id="left2">
<img src="../images/kopf/rechts1.png" id="right1">
<img src="../images/kopf/rechts2.png" id="right2">

和Javascript：

<script>

 var mouseX = 0;
 var imageMiddle = document.getElementById("front");
 var imageLeft1 = document.getElementById("left1");
 var imageLeft2 = document.getElementById("left2");
 var imageRight1 = document.getElementById("right1");        
 var imageRight2 = document.getElementById("right2");

$(document).on('mousemove', function getMousePosition(event) { 
mouseX = event.pageX;

if(0 < mouseX < 200) {
    imageLeft2.style.display = "inline";
    imageMiddle.style.display = "none";
} 
else if(200 < mouseX < 400) {
    imageLeft1.style.display = "inline";
    imageMiddle.style.display = "none";
}
else if(400 < mouseX < 600) {
    imageMiddle.style.display = "inline";
}
else if(600 < mouseX < 800) {
    imageRight1.style.display = "inline";
    imageMiddle.style.display = "none";
}
else if(800 < mouseX < 1000) {
    imageRight2.style.display = "inline";
    imageMiddle.style.display = "none";
}
});
</script>

运行时没有任何反应。我哪里出错了？