title提示效果
<html>
<head>
<title></title>
<style type="text/css">
*{
font-size:9pt;
margin:0px;padding:0px;
}
#tips{
position:absolute;display:none;
background:#FF6633;width:250px;
border:1px solid #000;color:#fff
}
#title{
background:#333;padding:0px 3px;
height:20px;line-height:20px;
text-align:right;font-weight:bold;
}
#content{
height: 20px;
padding:2px;
}
</style>
<script type="text/javascript">
function addEvent(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
function linkTitle(){
if(!document.getElementsByTagName) return ;
var anchors=document.getElementsByTagName("a");
for(var i=0;i<anchors.length;i++){
anchor=anchors[i];
if(anchor.getAttribute("tip")){
addEvent(anchor,"mouseover",linkMouseOver);
addEvent(anchor,"mouseout",linkMouseOut);
}
}
}
function linkMouseOver(){
var title=document.getElementById("tips");
title.style.top=event.y;
title.style.left=event.x;
title.style.display="block";
document.getElementById("title").innerHTML=event.srcElement.getAttribute("tip").split(":")[0];
document.getElementById("content").innerHTML=event.srcElement.getAttribute("tip").split(":")[1];
}
function linkMouseOut(){
document.getElementById("tips").style.display="none";
}
</script>
</head>
<body>
<div id="tips">
<div id="title"></div>
<div id="content"></div>
</div>
<div style="display:block">
<a href="#" tip="标题一:内容一在这里">link1</a><br />
<a href="#" tip="标题二:内容二在这里">link2</a><br />
<a href="#">link3</a><br />
<a href="#">link4</a><br />
<a href="#">link5</a><br />
<a href="#">link6</a><br />
<a href="#">link7</a><br />
</div>
<script type="text/javascript">
linkTitle();
</script>
</body>
</html>