Показать разные изображения в зависимости от положения курсора

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>

Ничего не происходит, когда я запускаю это. Где я неправ?