鼠标悬停显示图片

<html>

<head>

<!--

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>

<!--

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>

<br>

<br>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

posted @ 2008-02-14 19:25 龍峸.大卫阅读(1745) 评论(0) 收藏举报

刷新页面返回顶部

龍峸

Asp.Net - jQuery

鼠标悬停显示图片

公告