首先原图片就是大图片,
<div id="_images" style="border:#000 1px solid;overfow:hidden;width:100px;height:100px"><img id="img" src="15.jpg" width="100" height="100" border="0" οnmοuseοver="show(this)" οnmοuseοut="hide(this)"/></div>
1.小图所在的div,用style=overfow:hidden;width:100px;height:100px;和
<img width="100" height="100" />来限定图片显示大小,只显示为高宽100px
<div id="enlarge_images" style="position: absolute; z-index:2; display:none;"><img id="showimg" src="pixel.gif" \></div>
2.用于显示大图即原本大小图的div,style=display:none;让它先不显示
<SCRIPT>
function show(_this) {
document.getElementById("enlarge_images").innerHTML = "<div><img src='" + _this.src + "' ></div>";
move_layer(event); //显示时出现的位置
}
//鼠标悬停在小图上,用enlarge_images层显示
function hide(_this) {
document.getElementById("enlarge_images").innerHTML = ""; document.getElementById("enlarge_images").style.display="none";
}
//鼠标离开,enlarge_images层不显示
function move_layer(_event){
document.getElementById("enlarge_images").style.left=_event.x;
document.getElementById("enlarge_images").style.top=_event.y;
}
</SCRIPT>
如果是两张图片,改这里
function show(_this) {
document.getElementById("enlarge_images").style.display="";
document.getElementById("enlarge_images").innerHTML = "<div><img src='" + _this.src + "' ></div>"; //_this.src 改成大图的 src
move_layer(event); //显示时出现的位置
}
//比如小图src是 15.jpg,大图地址应该设置为有规律的,例如15_large.jpg,更改函数
function show(_this) {
var _src = _this.src.replace(/\./ig,"_large.");
document.getElementById("enlarge_images").style.display="";
document.getElementById("enlarge_images").innerHTML = "<div><img src='" + _src + "' ></div>";
move_layer(event);
}
}
document.getElementById("enlarge_images").style.display="";
这里的正则表达式是简单的,把15.jpg中的"."替换为"_large."就得到了15_large.jpg