鼠标悬停显示图片

< html >
< head >
< meta http - equiv = " Content-Type "  c  />
< title > 淘宝效果 </ title >
< style type = " text/css " >
<!--
body  { font-size:12px; }
.but {
background:url(images/bg_x.jpg) -4px -4px;
width:67px;
height:23px;
border:0;
cursor:pointer;
}
.buts {
background:url(images/bg_x.jpg) -4px -30px;
width:67px;
height:23px;
border:0;
cursor:pointer;
}
#previewBox  {
position: absolute;
width: inherit;
color: #999999;
padding: 4px;
background-color: #E8E8E8;
border: 1px solid #8C8C8C;
}
#previewCase  {
padding: 10px;
background-color: #FFFFFF;
}
#previewCase img {
border: 1px solid #BABABA;
}
-->
</ style >
< script language = " javascript "  type = " text/javascript " >
<!--
var showTime  =   500 ;
var imgMaxWidth  =   200 ;
var imgMaxHeight  =   180 ;
var timeDO  =   null ;
var timeCheck  =   null ;
var prevFrom  =   null ;
var mFrom  =   null ;
var pBox  =   null ;
var pFrom  =   null ;
var pLoad  =   null ;
var pImage  =   null ;
var loadingImg  =   " Images/Loading.gif " ;
function alerts(Msg)  {
document.getElementById("showMsg").innerHTML += "&nbsp;&nbsp;"+ Msg;
}
function showPreview(e)  {
var h_temp=0,l_temp=0
pFrom = e.target || e.srcElement;
if(pFrom.parentElement.tagName=="TD"){
if(pFrom.parentElement.parentElement.parentElement.tagName=="TABLE")var temp=pFrom.parentElement.parentElement.parentElement
if(pFrom.parentElement.parentElement.parentElement.parentElement.tagName=="TABLE")var temp=pFrom.parentElement.parentElement.parentElement.parentElement
h_temp=temp.offsetTop;
l_temp=20
}
if(pFrom.id == prevFrom){return false;}
hidePreview(e);
var left = pFrom.offsetLeft + pFrom.offsetWidth + l_temp - 10;
var top = pFrom.offsetTop+h_temp;
pBox.style.left = left +'px';
pBox.style.top = top +'px';
pImage.src = loadingImg;
pImage.style.width = pImage.style.height = '';
prevFrom = pFrom.id;
timeDO = setTimeout("loadPerviewImg()", showTime);
}
function hidePreview(e)  {
var mFrom;
if(e) {
mFrom = e.relatedTarget || e.toElement;
if ((mFrom.id.indexOf('preview') != -1) || (mFrom.id == prevFrom)){
//alerts(mFrom.id);
return false;
}
clearInterval(timeDO);
loadPerviewImg._img = null;
pImage.src = null;
prevFrom = null;
previewBox.style.display = 'none';
}
}
function loadPerviewImg()  {
clearTimeout(timeDO);
var largeSrc = pFrom.getAttribute("large-src");
if (!largeSrc) {
return false;
}else{
loadPerviewImg._img = new Image();
loadPerviewImg._img.src = largeSrc;
pBox.style.display = '';
timeCheck = setInterval("loadPerviewImg.check()", 20);
}
}
loadPerviewImg.check  =  function()  {
//alert('check');
if(loadPerviewImg._img && loadPerviewImg._img.complete) {
loadPerviewImg.onload();
//alerts('complete');
}
}
loadPerviewImg.onload  =  function()  {
//pBox.innerHTML += pFrom.getAttribute("large-src") +"<br />"
clearInterval(timeCheck);
pImage.src = loadPerviewImg._img.src;
resetPreviewImg();
loadPerviewImg._img = null;
}
function resetPreviewImg()  {
var w = loadPerviewImg._img.width;
var h = loadPerviewImg._img.height;
if (w >= h && w > imgMaxWidth) {
pImage.style.width =imgMaxWidth + 'px';
}
else if (h >= w && h > imgMaxHeight) {
pImage.style.height = imgMaxHeight + 'px';
}
else {
pImage.style.width = pImage.style.height = '';
}
}
window.onload  =  function()  {
pBox = document.getElementById("previewBox");
pLoad = document.getElementById("previewLoading");
pImage = document.getElementById("previewImg");
}
-->
</ script >
</ head >
< body >
< div id = " previewBox "  style = " display: none; "   >
< div id = " previewCase " >
< img id = " previewImg "  src = ""   />
</ div >
</ div >
< br >< br >< br >
< br >< br >< br >
< br >< br >< br >
& nbsp; & nbsp; & nbsp; & nbsp; < a id = " prevLink01 "  href = " javascript:void(0); "    large - src = " /upload/remotupload/20071149331348.gif " > 111111111111 </ a >
< br >
< br >
& nbsp; & nbsp; & nbsp; & nbsp; < a id = " prevLink02 "  href = " javascript:void(0); "    large - src = " /upload/remotupload/20071149331147.jpg " > 222222222222 </ a >
< br >
< br >
< br >
< br >
< br >
< br >
< table width = " 960 "  border = " 0 "  align = " center "  cellpadding = " 5 "  cellspacing = " 1 "  bgcolor = " #CCCCCC " >
< tr >
< td bgcolor = " #FFFFFF " >< a id = " prevLink03 "  href = " javascript:void(0); "    large - src = " /upload/remotupload/20071149331348.gif " > 11111111111 </ a ></ td >
</ tr >
< tr >
< td bgcolor = " #FFFFFF " >< a id = " prevLink04 "  href = " javascript:void(0); "    large - src = " /upload/remotupload/20071149331147.jpg " > 22222222222 </ a ></ td >
</ tr >
</ table >
</ body >
</ html >