鼠标悬停显示图片
<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 += " "+ 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>
<a id="prevLink01" href="javascript:void(0);" large-src="/upload/remotupload/20071149331348.gif">111111111111</a>
<br>
<br>
<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>
浙公网安备 33010602011771号