今早在经典看到的.不用自己费脑细胞想了.以后有时间,把这个整合到自己的js库里去吧.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.altbox{ border:1px solid #f60; background:#fff; 160px; padding:5px; font-family:Arial; font-size:12px}
</style>
<script type="text/javascript">
window.onload = function() {
var offsetX = 20;
var offsetY = 20;
var imgs = document.images;
for (var i=0; i<imgs.length; i++) {
(function() {
var div;
var pw = getPW();
var ph = getPH();
var timeout;
document.images[i].onmouseover = function(e) {
div = document.createElement("DIV");
div.className = "altbox";
div.innerHTML = this.alt;
div.style.position = "absolute";
this.alt = '';
document.body.appendChild(div);
var p = getMouse(e);
var x = p.x + offsetX;
var y = p.y + offsetY;
if (div.offsetWidth + x < pw) {
div.style.left = x + "px" ;
} else {
div.style.left = ( pw - div.offsetWidth ) + "px";
}
if (div.offsetHeight + y < ph) {
div.style.top = y + "px";
} else {
div.style.top = (ph - div.offsetHeight) + "px";
}
(function(img) {
timeout = setTimeout(function() {
if (div) {
img.alt = div.innerHTML;
div.parentNode.removeChild(div);
document.onmousemove = null;
}
},3000)
})(this);
document.onmousemove = function(e) {
var p = getMouse(e);
var x = p.x + offsetX;
var y = p.y + offsetY;
if (div.offsetWidth + x < pw) {
div.style.left = x + "px" ;
}
if (div.offsetHeight + y < ph) {
div.style.top = y + "px";
}
}
}
document.images[i].onmouseout = function(e) {
if (div.parentNode) {
this.alt = div.innerHTML;
div.parentNode.removeChild(div);
document.onmousemove = null;
clearTimeout(timeout);
}
}
})();
}
}
function getMouse(ev) {
var ev = ev || window.event;
if (ev.x) {
nx = ev.x;
ny = ev.y;
} else {
nx = ev.pageX;
ny = ev.pageY;
}
return {x:nx,y:ny};
}
function getPW() {
return document.documentElement.scrollWidth;
}
function getPH() {
return document.documentElement.clientHeight > document.documentElement.scrollHeight ? document.documentElement.clientHeight : document.documentElement.scrollHeight;
}</script>
</head>
<body>
<img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" alt="提示提示提示1" width="204" height="150" />
<img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" alt="提示提示提示2" width="204" height="150" />
<img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" alt="提示提示提示3" width="204" height="150" />
<img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" alt="提示提示提示4" width="204" height="150" />
<img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" alt="提示提示提示5" width="204" height="150" />
<img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" alt="提示提示提示6" width="204" height="150" />
<img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" alt="提示提示提示7" width="204" height="150" />
</body>
</html>
