如何使用Javascript在鼠标悬停时放大图像？

<img src="image.jpg" id="image" onmouseover="zoomIn()" onmouseout="zoomOut()">
<div id="zoomedContainer"></div>

#image {
  width: 200px;
  height: 200px;
}

#zoomedContainer {
  position: absolute;
  top: 0;
  left: 220px; /* 放大图像显示位置 */
  width: 400px; /* 放大图像的宽度 */
  height: 400px; /* 放大图像的高度 */
  overflow: hidden;
  display: none; /* 初始隐藏放大图像容器 */
}

#zoomedContainer img {
  width: 800px; /* 放大图像的实际大小 */
  height: 800px;
  position: relative;
  top: -100px; /* 调整放大图像在容器中的位置，以实现局部放大效果 */
  left: -100px;
}

function zoomIn() {
  var image = document.getElementById("image");
  var zoomedContainer = document.getElementById("zoomedContainer");
  var zoomedImg = document.createElement("img");

  // 设置放大图像的路径为原始图像路径
  zoomedImg.src = image.src;

  // 清空容器中的内容，并添加放大图像
  zoomedContainer.innerHTML = "";
  zoomedContainer.appendChild(zoomedImg);

  // 显示放大图像容器
  zoomedContainer.style.display = "block";
}

function zoomOut() {
  var zoomedContainer = document.getElementById("zoomedContainer");
  
  // 隐藏放大图像容器
  zoomedContainer.style.display = "none";
}