html提示框脚本,DIV+CSS弹出提示框脚本_html/css_WEB-ITnose

DIV+CSS弹出提示框脚本，效果如下：

JS代码如下

Code

/*

使用方法：

直接调用showhint()方法即可，showhint()方法中参数说明：obj为要显示提示信息的控件对象，info为提示内容

例：

οnmοuseοver="showhint(this,'这是地球人都知道的东西，没什么好提示的。')"

οnmοuseοut="hidehintinfo()"

*/

document.write("");

function showhint(obj,info)

{

var top=obj.offsetTop;

var showtype="up";

var topimg="/ControlsTest/images/hint/hintuptop.gif";

var bottomimg="/ControlsTest/images/hint/hintupbottom.gif";

var hintimg="/ControlsTest/images/hint/ydot.png";

if(top<200)

{

showtype="down";

topimg="/ControlsTest/images/hint/hintdowntop.gif";

bottomimg="/ControlsTest/images/hint/hintdownbottom.gif";

}

showhintinfo(obj,0,0,'提示',info,0,showtype,topimg,bottomimg,hintimg);

}

function showhintinfo(obj, objleftoffset,objtopoffset, title, info , objheight, showtype ,topimg,bottomimg,hintimg)

{

var p = getposition(obj);

if((showtype==null)||(showtype ==""))

{

showtype =="up";

}

//以下是自己修改

var html="

"+info+"

";

//以上是自己修改

// document.getElementById('hintiframe'+showtype).style.height= objheight + "px";

// var frame;

// frame=document.getElementById('hintiframe'+showtype).style.height;

// document.getElementById('hintinfo'+showtype).innerHTML = info;

// document.getElementById('hintdiv'+showtype).style.display='block';

document.getElementById('hintdiv').style.display='block';

if(objtopoffset == 0)

{

document.getElementById("hintdiv").innerHTML=html;

if(showtype=="up")

{

document.getElementById('hintiframe').style.height= objheight + "px";

document.getElementById('hintdiv').style.top=(p['y']-document.getElementById('hintinfo'+showtype).offsetHeight-43)+"px";

}

else

{

document.getElementById('hintiframe').style.height= objheight + "px";

document.getElementById('hintdiv').style.top=p['y']+obj.offsetHeight+3+"px";

}

}

else

{

document.getElementById('hintdiv').style.top=p['y']+objtopoffset+"px";

}

document.getElementById('hintdiv').style.left=p['x']+objleftoffset+"px";

}

function hidehintinfo()

{

document.getElementById('hintdiv').style.display='none';

// document.getElementById('hintdivdown').style.display='none';

}

function getposition(obj)

{

var r = new Array();

r['x'] = obj.offsetLeft;

r['y'] = obj.offsetTop;

while(obj = obj.offsetParent)

{

r['x'] += obj.offsetLeft;

r['y'] += obj.offsetTop;

}

return r;

}

Code

/*

使用方法：

直接调用showhint()方法即可，showhint()方法中参数说明：obj为要显示提示信息的控件对象，info为提示内容

例：

οnmοuseοver="showhint(this,'这是地球人都知道的东西，没什么好提示的。')"

οnmοuseοut="hidehintinfo()"

*/

document.write("");

function showhint(obj,info)

{

var top=obj.offsetTop;

var showtype="up";

var topimg="/ControlsTest/images/hint/hintuptop.gif";

var bottomimg="/ControlsTest/images/hint/hintupbottom.gif";

var hintimg="/ControlsTest/images/hint/ydot.png";

if(top<200)

{

showtype="down";

topimg="/ControlsTest/images/hint/hintdowntop.gif";

bottomimg="/ControlsTest/images/hint/hintdownbottom.gif";

}

showhintinfo(obj,0,0,'提示',info,0,showtype,topimg,bottomimg,hintimg);

}

function showhintinfo(obj, objleftoffset,objtopoffset, title, info , objheight, showtype ,topimg,bottomimg,hintimg)

{

var p = getposition(obj);

if((showtype==null)||(showtype ==""))

{

showtype =="up";

}

//以下是自己修改

var html="

"+info+"

";

//以上是自己修改

// document.getElementById('hintiframe'+showtype).style.height= objheight + "px";

// var frame;

// frame=document.getElementById('hintiframe'+showtype).style.height;

// document.getElementById('hintinfo'+showtype).innerHTML = info;

// document.getElementById('hintdiv'+showtype).style.display='block';

document.getElementById('hintdiv').style.display='block';

if(objtopoffset == 0)

{

document.getElementById("hintdiv").innerHTML=html;

if(showtype=="up")

{

document.getElementById('hintiframe').style.height= objheight + "px";

document.getElementById('hintdiv').style.top=(p['y']-document.getElementById('hintinfo'+showtype).offsetHeight-43)+"px";

}

else

{

document.getElementById('hintiframe').style.height= objheight + "px";

document.getElementById('hintdiv').style.top=p['y']+obj.offsetHeight+3+"px";

}

}

else

{

document.getElementById('hintdiv').style.top=p['y']+objtopoffset+"px";

}

document.getElementById('hintdiv').style.left=p['x']+objleftoffset+"px";

}

function hidehintinfo()

{

document.getElementById('hintdiv').style.display='none';

// document.getElementById('hintdivdown').style.display='none';

}

function getposition(obj)

{

var r = new Array();

r['x'] = obj.offsetLeft;

r['y'] = obj.offsetTop;

while(obj = obj.offsetParent)

{

r['x'] += obj.offsetLeft;

r['y'] += obj.offsetTop;

}

return r;

}

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理