Tooltip:利用javascript模拟实现Tooltip,以便提供友好的提示信息

// 「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){
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值