淘宝中的一个鼠标感应大图（鼠标经过显示大图）

看到淘宝上的一个效果不错。存了一个，最后整理代码如下：

<STYLE type=text/css media=screen>DIV#PreviewBox {
 DISPLAY: none; PADDING-LEFT: 6px; Z-INDEX: 2006; POSITION: absolute
}
DIV#PreviewBox SPAN {
 BACKGROUND: url(http://img.taobao.com/2k6/sys/list/arrow.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- 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)" _fcksavedurl=""javascript:void(0)"" _fcksavedurl=""javascript:void(0)"" _fcksavedurl=""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="productshow.asp?articleid=<%=rsarticle("articleid")%>" target="_blank" class="my"><img src="<%=rsArticle("bookpic")%>" width="110" height="110" border="0" pic-link="<%=rsArticle("defaultpicurl")%>"
large-src="<%=rsArticle("defaultpicurl")%>"></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';}}

淘宝中的一个鼠标感应大图（鼠标经过显示大图）http://www.corange.cn/archives/2007/05/35.html