论坛首页 入门技术论坛

div层上显示提示信息

浏览 2558 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-02-20   最后修改:2009-02-20
<!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>
论坛首页 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics