Web通用提示脚本代码

主要功能是实现和超链接 <A> 中title类似的提示功能，当然这类代码网上有很多，我只是觉得要不就是代码很复杂，虽然功能很不错，要不就是对浏览器的支持不足，至少IE和Mozilla不能同时满足，于是自己写了个简单的代码方便自己使用
原理：还是使用简单的绝对层DIV的方法来显示内容，运用事件绑定把显示和mouseover mousemove mouseout 三个事件绑定起来，并自己定义属性 hint
使用方法
1.对于需要实现这个效果的地方 <a href="" hint="aa">aa</a> 其中hint的内容为提示显示的内容，可以为图片等等符合html要求的东西
2. 然后可以获得这个超级链接的上层对象如document，进行设置，比如<body onload="initElement(document)"> 此时会对全部符合条件的超链接进行设置
注意以下的js代码需要包含在body中(主要原因是需要document.write一个层，需要的话可以自己分开)
代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> New Document </title>

</head><body onload="initElement(document)">

<!--

////////////////////////////

/// 显示tips开始

document.write(

"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #C0C0C0;background-color:#FFFFE7; height: auto; left:77px;top: 10px;z-index:10;\"></div>");

var tempElement=document.getElementById("tooltip");

is_IE=(typeof(window.attachEvent)!="undefined");

is_Moz=(typeof(window.addEventListener)!="undefined");

function initElement(obj)

{

//alert(obj.innerHTML)

var temp=obj.getElementsByTagName("a");

if(temp==null)return;

for(var i=0;i<temp.length;i++)

{

if(temp[i].getAttribute("hint")==null||temp[i].getAttribute("hint")=="")continue;

if(is_IE)

{

temp[i].detachEvent("onmousemove",showtip)

temp[i].detachEvent("onmouseover",showtip)

temp[i].detachEvent("onmouseout",hidetip)

/////////////

temp[i].attachEvent("onmousemove",showtip)

temp[i].attachEvent("onmouseover",showtip)

temp[i].attachEvent("onmouseout",hidetip)

}

if(is_Moz)

{

temp[i].removeEventListener("mousemove",showtip,true)

temp[i].removeEventListener("mouseover",showtip,true)

temp[i].removeEventListener("mouseout",hidetip,true)

/////////////

temp[i].addEventListener("mousemove",showtip,true)

temp[i].addEventListener("mouseover",showtip,true)

temp[i].addEventListener("mouseout",hidetip,true)

}

/////////////////

function showtip(oEventParam) //显示链接的说明

{

var tipsText="";

if(is_IE)

tipsText=oEventParam.srcElement.getAttribute("hint");

if(is_Moz)

tipsText=oEventParam.target.getAttribute("hint"); // mozilla

if(tipsText==null||tipsText=="")

return false;

if (tempElement) //&&document.readyState=="complete")//针对IE

{

//显示跑马灯,内容就是提示框的内容

tempElement.innerHTML="<div vAlign=center>"+tipsText+"</div>";

}

offerX=document.body.scrollLeft;

offerY=document.body.scrollTop;

tempElement.style.left=oEventParam.clientX+offerX+20;

tempElement.style.top=oEventParam.clientY+offerY-tempElement.clientHeight/2;

tempElement.style.left=oEventParam.clientX+offerX+20;

tempElement.style.top=oEventParam.clientY+offerY-tempElement.clientHeight/2;

if (oEventParam.clientX>200)

{

tempElement.style.pixelLeft=300;

tempElement.style.pixelTop=oEventParam.clientY+ document.body.scrollTop-tempElement.clientHeight/2;

}

tempElement.style.visibility="visible";

}

function hidetip() //隐藏链接的说明

{

var tempElement=document.getElementById("tooltip");

if (tempElement)

tempElement.style.visibility="hidden";

}

// 显示tips 结束

//-->

</script>

</body>

</html>

posted on 2007-02-07 12:30 mbskys 阅读(219) 评论(0) 收藏举报