// 「Tooltip」 JavaScript Document For details
/* ----------------------------------------------------------
程序制作: 狼之舞(c) 2009-2019
制作日期: 2009年06月06日
联系方式:QQ-63858288 MSN:usersmj@hotmail.com
有关详情,请联系狼之舞
转载请注明出处并保留本说明
----------------------------------------------------------
Powered by·Dancewolf(c) 2009-2019
Technical Support:
Tencent QQ:63858288
E-mail:usersmj@hotmail.com
For details, please contact Dancewolf
Reprint please indicate the source and to retain this note
----------------------------------------------------------
*/
//*===========================================
//* Public begin
//*===========================================
//根据ID获取对像
function $(objID){return document.getElementById(objID);}
//获取javascript文件传递的参数
var request = {
QueryString : function(val){
var param ="?"+document.getElementsByTagName("script")[document.getElementsByTagName("script").length-1].src.split("?")[1]
var re = new RegExp("" +val+ "=([^&?]*)", "ig");
return ((param.match(re))?(param.match(re)[0].substr(val.length+1)):null);
}
}
//var imgPath=document.getElementsByTagName("script")[document.getElementsByTagName("script").length-1].src.split("?")[0];
//imgPath=imgPath.replace("ToolTip.js","");
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
//*===========================================
//* Public End
//*===========================================
//
//初始化
//
var path=request.QueryString("path");
path=(path==null)?"":(path+"/");
//alert(path)
document.write("<div id='ToolTipBox' style='position:absolute;z-index:100;width:210px;font-size: 10pt;padding: 5px;visibility: hidden;display: none;'>");
document.write(" <div id='ToolTipHead'><img src='"+path+"Images/1_1a.gif' name='imgHeader' width='210' height='24' id='imgHeader' /></div>");
document.write(" <div id='ToolTipBody' style='height:36px;text-indent: 25px;font-size: 10pt;padding: 5px;background-image: url("+path+"Images/1_Body.gif); background-repeat: repeat-y;background-position: center;'></div>");
document.write(" <div id='ToolTipFoot'><img src='"+path+"Images/1_1.gif' name='imgFooter' width='210' height='4' id='imgFooter' /></div>");
//document.write(" <!--iframe解决div总是被select遮挡的问题-->");
//document.write(" <iframe allowTransparency='true' frameborder='0' src='"+path+"ToolTip.html' style=/"position:absolute;visibility:inherit; top:0px; left:0px;border-style:none; z-index:-1;width:expression(this.parentNode.offsetWidth); height:expression(this.parentNode.offsetHeight);background-color:transparent;/"></iframe>");
document.write("</div>");
//
var objToolTip=$("ToolTipBox");
//函数:HideToolTip()——隐藏提示信息
//调用: οnmοuseοut="javascript:HideToolTip();"
function HideToolTip(){
try{
objToolTip.style.display="none";
objToolTip.style.visibility="hidden";
}catch(e){
objToolTip.style.display="none";
objToolTip.style.visibility="hide";
}
}
/*=======================================================*/
/* */
/* 函数: ShowToolTip(txt)——显示提示信息 */
/* */
/* 参数: txt-要显示的内容 */
/* */
/* 调用: οnmοusemοve="javascript:ShowToolTip('txt');" */
/* */
/*=======================================================*/
function ShowToolTip(txt){
/*更新提示*/
try{
$("ToolTipBody").innerHTML = txt;
}catch(e) {
if (ns4) {
var lyr = document.ToolTipBody.document
lyr.write(txt)
lyr.close()
}else if (ie4){document.all["ToolTipBody"].innerHTML = txt;}
}
/*移动提示 */
var evt=evt?evt:(window.event ? window.event : null);
var element=(evt.target)?evt.target:evt.srcElement;
moveTo(evt)
/*显示提示 */
try{
objToolTip.style.display="block";
objToolTip.style.visibility="visible";
}catch(e){
objToolTip.style.display="block";
objToolTip.style.visibility="show";
}
/*添加onmouseout事件,隐藏信息 */
try{
//if(evt.type=="mousemove"){
element.οnmοuseοut=function(){HideToolTip();};
//}
}catch(e){}
}
//================================================
//函数: moveTo(evt)
//作用: 获取显示坐标并移动到相关位置
//================================================
function moveTo(evt){
/*获取显示坐标 */
var xPos=0;
var yPos=0;
evt=evt || window.event;
if(evt.pageX){
xPos=evt.pageX;
yPos=evt.pageY;
} else {
xPos=evt.clientX+document.documentElement.scrollLeft-document.documentElement.clientLeft;
yPos=evt.clientY+document.documentElement.scrollTop-document.documentElement.clientTop;
}
/*判断是否超出显示范围,以便获取友好的显示样式*/
var xv=((xPos+210)>document.documentElement.clientWidth)?true:false;
var yv=((yPos+80)>document.documentElement.clientHeight)?true:false;
if(xv&&yv){/* xv=true yv=true mode:4*/
setImage("imgHeader",path+"Images/1_2.gif");
setImage("imgFooter",path+"Images/1_2b.gif");
objToolTip.style.left=xPos-200;
objToolTip.style.top=yPos-60;
}else if((!xv)&&(yv)){/* xv=true yv=false mode:3*/
setImage("imgHeader",path+"Images/1_2.gif");
setImage("imgFooter",path+"Images/1_2a.gif");
objToolTip.style.left=xPos;
objToolTip.style.top=yPos-60
}else if((xv)&&(!yv)){/* xv=false yv=true mode:2*/
setImage("imgHeader",path+"Images/1_1b.gif");
setImage("imgFooter",path+"Images/1_1.gif");
objToolTip.style.left=xPos-200;
objToolTip.style.top=yPos;
}else{/* xv=false yv=false mode:1*/
setImage("imgHeader",path+"Images/1_1a.gif");
setImage("imgFooter",path+"Images/1_1.gif");
objToolTip.style.left=xPos;
objToolTip.style.top=yPos;
}
}
//================================================
//函数: setImage(img,imgSrc)
//作用:更改图片来源及大小
//参数: img - 图片ID
// imgSrc- 图片来源
//================================================
function setImage(img,imgSrc){
var tempImg = new Image();//建立临时图片对象以便获取其宽、高
tempImg.src = imgSrc;
$(img).src =imgSrc;
$(img).style.cssText="width:"+tempImg.width+"px;height:"+tempImg.height+"px;";
}
//================================================
//触发document.onclick事件来隐藏信息,
//防止onmouseout事件隐藏失败 */
//================================================
try{
window.document.οnclick=function(){HideToolTip();};
}catch(e){
}
Tooltip:利用javascript模拟实现Tooltip,以便提供友好的提示信息
最新推荐文章于 2022-04-27 12:06:21 发布