关闭

js为超级连接加上说明文字

650人阅读 评论(0) 收藏 举报

// ===================================================
// Tooltip V1.01
// 为超级连接加上说明文字
// Author:Huacn Lee
// Blog: Huacn.cnblogs.com
// ===================================================
var _BarIdName = "___tooltipbar";
var _BarTitleIdName = "___tooltipbartitle";
var _BarLinkIdName = "___tooltipbarlink";

//页面上调用的方法
function initToolTip()
{  
 //创建tooltip显示区域
 initTipbar();
 //注册CSS样式
 //initStyle();
 
 var tagaArry = new Array(); 
 var tag = null;  
 tagaArry = document.getElementsByTagName("a");
 
 for(var i=0;i<tagaArry.length;i++)
 { 
  tag = tagaArry[i]; 
  //alert(tag.href);  
  //var oldTitle = tag.title; 
  
  if(tag.id=='ssHyperLink')
   continue;
  
  //为超级连接加入鼠标事件
  //进入连接
  tag.onmouseover = function()
  {
   showTipbar(this);
  };
  //离开连接
  tag.onmouseout = function()
  {
   hideTipbar(this); 
  }
  //在连接上移动,设置坐标
  tag.onmousemove = function()
  {   
   setTipLocation();
  }
  
  //为Firefox加入mousemove的事件侦听,因为window.eventFirefox没有办法用
  if(tag.addEventListener)
  {
    tag.addEventListener('mousemove', setTipLocation, true);
  }
 } 
}

//显示tooltip
function showTipbar(tag)

 var tipbar = $(_BarIdName);
 var tipTitle = $(_BarTitleIdName);
// var tipLink = $(_BarLinkIdName); 
 
 tipTitle.innerHTML = tag.title;
// tipLink.innerHTML =tag.href;
 tag.title = ""; 
 tipbar.style.display = ""; 
}

//隐藏tooltip
function hideTipbar(tag)
{
 var tipbar = $(_BarIdName);
 var tipTitle = $(_BarTitleIdName);
 
 tipbar.style.display = "none"; 
 tag.title = tipTitle.innerHTML; 
}

//设置tipbar的位置
function setTipLocation(e)
{
 var intX=0,intY=0; 
 //判断有没有收到firefox的监听的event
 if(e == null)
 {
  //当没收到时用window.event IE与Opera支持的
  e = window.event;  
 }
 
 if(e.pageX || e.pageY)
 {
     intX=e.pageX; intY=e.pageY;
    }
   
 else if(e.clientX || e.clientY)
 {
     if(document.documentElement.scrollTop)
  {
         intX=e.clientX+document.documentElement.scrollLeft;
         intY=e.clientY+document.documentElement.scrollTop;
        }
     else
  {
         intX=e.clientX+document.body.scrollLeft;
         intY=e.clientY+document.body.scrollTop;
        }
    }
 
 //取得tooltip对象
 var tipbar = $(_BarIdName); 
  
 tipbar.style.top = (intY+20)+"px";
 tipbar.style.left = (intX +10)+"px";
}

//初始化tooltip区域
function initTipbar()
{   
 var div = document.createElement("div"); 
 div.className = "tooltipclass123123";
 div.id = _BarIdName;
 
 var divTitle = document.createElement("p");
 divTitle.id = _BarTitleIdName; 
 divTitle.className = "tip";
 div.appendChild(divTitle);

 
// var divLink = document.createElement("p");
// divLink.id = _BarLinkIdName;
// divLink.className = "url";
// div.appendChild(divLink);
 
 document.body.appendChild(div);
 div.style.display = "none";
 
 //alert(div.innerHTML);
}

//注册css
function initStyle()
{  
 var linkstyle = document.createElement("link");
 linkstyle.setAttribute("href","../Style/Skin1/equipment.css");
 linkstyle.setAttribute("rel","stylesheet");
 linkstyle.setAttribute("type","text/css");  
 linkstyle.setAttribute("media","screen"); 
 
 document.getElementsByTagName("head")[0].appendChild(linkstyle);
}

function $(re)
{
 return document.getElementById(re);
}
 

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:80261次
    • 积分:1645
    • 等级:
    • 排名:千里之外
    • 原创:83篇
    • 转载:27篇
    • 译文:1篇
    • 评论:2条
    最新评论