在网页设计中，为用户浏览图片提供便利的功能是提升用户体验的重要一环。其中，当用户将鼠标悬停在缩略图上时显示大图，是一种常见的交互方式。本文将介绍一种简单的JavaScript实现方法，用于在用户鼠标悬停时显示弹出图片。该脚本已在IE 7.0和Mozilla Firefox 3.0中测试通过。
实现步骤如下： 首先，在HTML页面上创建一个名为"imgbox"的DIV容器，用于显示缩略图。以下是DIV和与之关联的CSS元素ID：
<div id="imgbox"></div>
CSS元素如下：
#imgbox {
vertical-align: middle;
position: absolute;
border: 1px solid #999;
background: #FFFFFF;
filter: Alpha(Opacity=100);
visibility: hidden;
height: 200px;
width: 200px;
z-index: 50;
overflow: hidden;
text-align: center;
}
接下来是JavaScript代码，用于显示弹出图片：
获取缩略图的位置：
function getElementLeft(elm) {
var x = 0;
x = elm.offsetLeft;
elm = elm.offsetParent;
while (elm != null) {
x = parseInt(x) + parseInt(elm.offsetLeft);
elm = elm.offsetParent;
}
return x;
}
function getElementTop(elm) {
var y = 0;
y = elm.offsetTop;
elm = elm.offsetParent;
while (elm != null) {
y = parseInt(y) + parseInt(elm.offsetTop);
elm = elm.offsetParent;
}
return y;
}
获取缩略图的图片源，使DIV可见，调整高度和宽度到所需大小，并将图片附加到DIV上：
function Large(obj) {
var imgbox = document.getElementById("imgbox");
imgbox.style.visibility = 'visible';
var img = document.createElement("img");
img.src = obj.src;
img.style.width = '200px';
img.style.height = '200px';
if (img.addEventListener) {
img.addEventListener('mouseout', Out, false);
} else {
img.attachEvent('onmouseout', Out);
}
imgbox.innerHTML = '';
imgbox.appendChild(img);
imgbox.style.left = (getElementLeft(obj) - 50) + 'px';
imgbox.style.top = (getElementTop(obj) - 50) + 'px';
}
鼠标移出时隐藏DIV：
function Out() {
document.getElementById("imgbox").style.visibility = 'hidden';
}
<img id='img1' src='images/Sample.jpg' onmouseover="Large(this)" />