演示:
http://www.nbbulo.com/test/pic.htm
在<head>和</head>之间加入
<SCRIPT language=javascript>
function replaceImg(sourceUrl,imgUrl) {
if(document.all.mainpic.src == sourceUrl){
return;
}
var img = new Image();
img.src = sourceUrl;
if(img.width>280){
img.height=img.height/(img.width/280);
img.width=280;
}
var elem = document.getElementById("mainpic");
elem.width = img.width;
elem.height = img.height;
elem.src = sourceUrl;
document.getElementById("mainPicUrl").href = "" + imgUrl;
}
</SCRIPT>
缩略图代码:在你需要显示小图的地方加上此代码
<img style=""CURSOR: hand"" onclick="javascript:replaceImg('01.gif','01.gif')" src="01.gif" onload="javascript:if(this.height>this.width){this.height=80}else{this.width=80}" border="1">
<img style=""CURSOR: hand"" onclick="javascript:replaceImg('02.gif','02.gif')" src="02.gif" onload="javascript:if(this.height>this.width){this.height=80}else{this.width=80}" border="1">
<img style=""CURSOR: hand"" onclick="javascript:replaceImg('03.gif','03.gif')" src="03.gif" onload="javascript:if(this.height>this.width){this.height=80}else{this.width=80}" border="1">
<img style=""CURSOR: hand"" onclick="javascript:replaceImg('04.gif','04.gif')" src="04.gif" onload="javascript:if(this.height>this.width){this.height=80}else{this.width=80}" border="1">
全图代码:在你需要显示大图的地方加上此代码
<A id="mainPicUrl" onfocus="this.blur()" href="01.gif" target="_blank"><img id="mainpic" style="cursor: hand" src="01.gif" onload="javascript:if(this.height>this.width){this.height=280}else{this.width=280}" border="1" style="border-style: solid; border-color: #000000; padding: 1"></A>
注意:我上面的代码使用的自动缩放功能,大图宽度最大显示为280px,小图宽度最大为80px,大小你自己修改吧