当我的鼠标移动到图片的某个区域时，如何显示新图片？

<div id="image-container">
  <img src="original-image.jpg" alt="Original Image">
</div>

#image-container {
  position: relative;
  width: 500px;
  height: 300px;
}

#image-container img {
  width: 100%;
  height: 100%;
}

var imageContainer = document.getElementById('image-container');
var originalImage = imageContainer.querySelector('img');

imageContainer.addEventListener('mousemove', function(event) {
  var mouseX = event.clientX - imageContainer.offsetLeft;
  var mouseY = event.clientY - imageContainer.offsetTop;

  // 判断鼠标是否在目标区域内
  if (mouseX > 100 && mouseX < 200 && mouseY > 100 && mouseY < 200) {
    // 创建新图片元素
    var newImage = document.createElement('img');
    newImage.src = 'new-image.jpg';
    newImage.alt = 'New Image';

    // 清空容器并添加新图片
    imageContainer.innerHTML = '';
    imageContainer.appendChild(newImage);
  } else {
    // 鼠标不在目标区域内，恢复原始图片
    imageContainer.innerHTML = '';
    imageContainer.appendChild(originalImage);
  }
});