div层上显示提示信息 -

yinchunjian

浏览: 283094 次
性别:
来自: 苏州

最近访客更多访客>>

u012363178

scm002

techdo

loki888

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

div层上显示提示信息

XHTML HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script language="javascript">
var width = "80";
var height = ""
//设置层显示坐标
var offsetx = 2;
var offsety = 16;
var x = 0;
var y = 0;
var show = false;//判断是否显示层
var dStyle;//设置层的样式
document.onmousemove = mEvn;//作用重绘   document.onmousemove获取窗体的所有鼠标移动事件

//鼠标移动到目标对象上显示提示该方法只会在鼠标移动到目标对象上时只执行一次之后转到 mEvn()执行该函数中的内容
function mOvr() {
dStyle = detail.style;//获取层的样式对象
var obj = window.event.srcElement;//获取触发事件的对象
if (obj.nodeName == "FONT") {
obj.runtimeStyle.cssText = "background-color:#C0D0E8";
}
var s;//提示的内容
s = "<table border=\"1\" width=\"80\" id =\"tip\" bordercolor=\"#C7D0D2\" bgcolor=\"#ffffff\" cellpadding=\"0\" cellspacing=\"0\"><TR><td>" + "<TABLE WIDTH=100% BORDER=0                  CELLPADDING=0 CELLSPACING=0>提示信息</TABLE></TABLE>";
//document.all["detail"].innerHTML = s; //document.all["detail"]返回对象所包含id为detail的元素集合的引用。
detail.innerHTML = s;
if(show == false){
if((x + offsetx)<40){
dStyle.left = x + offsetx;
}else if((x + offsetx+(width/2))>250){
dStyle.left = x + offsetx - (width);
}else{
dStyle.left = x + offsetx - (width/2);
}
if((y + offsety+height)>280){
dStyle.top = y + offsety - height;
}else{
dStyle.top = y + offsety;
}

dStyle.visibility = "visible";
show = true;
}

}
//鼠标移开触发该事件该方法只会在鼠标移走目标对象上时只执行一次
function mOut() {
var obj = window.event.srcElement;
if (obj.nodeName == "FONT") {
obj.runtimeStyle.cssText = "";
}
show = false;
dStyle.visibility = "hidden";
}
//整个窗体上的移动事件都将执行该方法
function mEvn() {
x = event.x;
y = event.y;
if (document.body.scrollLeft) {
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
if (show) {
if((x + offsetx)<40){
dStyle.left = x + offsetx;
}else if((x + offsetx+(width/2))>250){
dStyle.left = x + offsetx - (width);
}else{
dStyle.left = x + offsetx - (width/2);
}

if((y + offsety+height)>280){
dStyle.top = y + offsety - height;
}else{
dStyle.top = y + offsety;
}
}
}
/*
//下面俩个只是测试用的
function test1(){
alert(test.value);//可以直接通过id名称来调用一个对象其功能相当于 document.getElementById("test");
}
function test2(){
for(i = 0; i < document.all.length; i++){//获取页面所有元素包含隐藏的元素
alert(document.all(i).tagName);
}
}*/
</script>
</head>
<body onload="">
<div id="detail" style="POSITION: absolute" title="ddd"></div>
<table>
<tr>
<td onMouseOver="mOvr()" onMouseOut="mOut()" style="cursor:hand">
提示信息
</td>
<td><input type="text" value="22" id="test" /> <font onMouseOver="mOvr()" onMouseOut="mOut()">测试</font></td>
</tr>
</table>
</body></html>

分享到：