编写脚本程序，在页面上放置一张图片，当鼠标划过图片 时，mouseover 事件发生，更换为另一张图片。

好的，下面是一个示例代码：

HTML 代码：

<div id="image-container">
  <img src="image1.jpg" id="image" alt="图片">
</div>

CSS 代码：

#image-container {
  position: relative; /* 设置为相对定位，用于后续设置 hover 效果 */
  width: 300px;
  height: 300px;
}
#image {
  position: absolute; /* 设置为绝对定位，用于后续设置 hover 效果 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease; /* 添加渐变动画效果 */
}
#image:hover {
  opacity: 0; /* 鼠标划过时，将当前图片透明度设置为 0 */
}

JavaScript 代码：

var image = document.getElementById('image');

image.addEventListener('mouseover', function() {
  this.src = 'image2.jpg'; // 鼠标划过时，将图片的 src 属性设置为第二张图片的地址
});

这段代码会在页面加载完毕后，监听图片的 mouseover 事件，当鼠标划过图片时，将图片的 src 属性设置为第二张图片的地址，从而实现更换图片的效果。同时，CSS 代码中还添加了渐变动画效果，使图片更加平滑地切换。