将以下代码放到<body></body>之间：
<STYLE type=text/css media=screen>DIV#PreviewBox {
DISPLAY: none; PADDING-LEFT: 6px; Z-INDEX: 2006; POSITION: absolute
}
DIV#PreviewBox SPAN {
BACKGROUND: url(http://www.jsbulo.com/img/logo_links.gif) no-repeat 0px 0px; LEFT: 0px; WIDTH: 7px; POSITION: absolute; TOP: 9px; HEIGHT: 13px
}
DIV#PreviewBox DIV.Picture {
BORDER-RIGHT: #666 1px solid; BORDER-TOP: #666 1px solid; BACKGROUND: #fff; FLOAT: left; BORDER-LEFT: #666 1px solid; BORDER-BOTTOM: #666 1px solid
}
DIV#PreviewBox DIV.Picture DIV {
BORDER-RIGHT: #e8e8e8 4px solid; BORDER-TOP: #e8e8e8 4px solid; BORDER-LEFT: #e8e8e8 4px solid; BORDER-BOTTOM: #e8e8e8 4px solid
}
DIV#PreviewBox DIV.Picture DIV A IMG {
BORDER-RIGHT: #b6b6b6 1px solid; BORDER-TOP: #b6b6b6 1px solid; DISPLAY: block; MARGIN: 19px; BORDER-LEFT: #b6b6b6 1px solid; BORDER-BOTTOM: #b6b6b6 1px solid; max-height: 250px; max-width: 250px
}
</STYLE>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="120"><DIV id=PreviewBox onmouseout=hidePreview(event);>
<DIV class=Picture onmouseout=hidePreview(event);><SPAN></SPAN>
<DIV><A id=previewUrl href="javascript:void(0)" target=_blank><IMG
oncontextmenu=return(false) id=PreviewImage onmouseout=hidePreview(event);
src="" border=0></A>
</DIV></DIV></DIV>
<SCRIPT language=javascript src="js/small2big.js"
type=text/javascript></SCRIPT>
<SCRIPT language=javascript type=text/javascript>
//<![CDATA[
var previewBox = document.getElementById(’PreviewBox’);
var previewImage = document.getElementById(’PreviewImage’);
var previewUrl = document.getElementById(’previewUrl’);
var previewFrom = null;
var previewTimeoutId = null;
var loadingImg = ’img/001.gif’;
//]]>
</SCRIPT>
<a onmouseover=showPreview(event); onmouseout=hidePreview(event); href=http://www.jsbulo.com target="_blank" class="my"><img src="http://www.jsbulo.com/img/logo_links.gif" width="110" height="110" border="0" pic-link="http://www.jsbulo.com/img/logo_links.gif"
large-src="http://www.jsbulo.com/img/logo_links.gif"></a>
</td>
用到的一个JS代码如下 small2big.js
var maxWidth=250;var maxHeight=250;function getPosXY(a,offset){var p=offset?offset.slice(0):[0,0],tn;while(a){tn=a.tagName.toUpperCase();if(tn==’IMG’){a=a.offsetParent;continue;}
p[0]+=a.offsetLeft-(tn=="DIV"&&a.scrollLeft?a.scrollLeft:0);p[1]+=a.offsetTop-(tn=="DIV"&&a.scrollTop?a.scrollTop:0);if(tn=="BODY")break;a=a.offsetParent;}
return p;}
function checkComplete(){if(checkComplete.__img&&checkComplete.__img.complete)
checkComplete.__onload();}
checkComplete.__onload=function(){clearInterval(checkComplete.__timeId);var w=checkComplete.__img.width;var h=checkComplete.__img.height;if(w>=h&&w>maxWidth){previewImage.style.width=maxWidth+’px’;}
else if(h>=w&&h>maxHeight){previewImage.style.height=maxHeight+’px’;}
else{previewImage.style.width=previewImage.style.height=’’;}
previewImage.src=checkComplete.__img.src;previewUrl.href=checkComplete.href;checkComplete.__img=null;}
function showPreview(e){hidePreview();previewFrom=e.target||e.srcElement;previewImage.src=loadingImg;previewImage.style.width=previewImage.style.height=’’;previewTimeoutId=setTimeout(’_showPreview()’,500);checkComplete.__img=null;}
function hidePreview(e){if(e){var toElement=e.relatedTarget||e.toElement;while(toElement){if(toElement.id==’PreviewBox’)
return;toElement=toElement.parentNode;}}
try{clearInterval(checkComplete.__timeId);checkComplete.__img=null;previewImage.src=null;}
catch(e){}
clearTimeout(previewTimeoutId);previewBox.style.display=’none’;}
function _showPreview(){checkComplete.__img=new Image();if(previewFrom.tagName.toUpperCase()==’A’)
previewFrom=previewFrom.getElementsByTagName(’img’)[0];var largeSrc=previewFrom.getAttribute("large-src");var picLink=previewFrom.getAttribute("pic-link");if(!largeSrc)return;else{checkComplete.__img.src=largeSrc;checkComplete.href=picLink;checkComplete.__timeId=setInterval("checkComplete()",20);var pos=getPosXY(previewFrom,[108,-2]);previewBox.style.left=pos[0]+’px’;previewBox.style.top=pos[1]+’px’;previewBox.style.display=’block’;}}
