<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>
本文所有信息都是由http://www.isee5.com Isee5音乐网提供 |