当鼠标滑过超链接出现提示框效果实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script type="text/javascript">function enableTooltips(id){var links,i,h;if(!document.getElementById || !document.getElementsByTagName) return;AddCss();h=document.createElement("span");h.id="btc";h.setAttribute("id","btc");h.style.position="absolute";document.getElementsByTagName("body")[0].appendChild(h);if(id==null) links=document.getElementsByTagName("a");else links=document.getElementById(id).getElementsByTagName("a");for(i=0;i<links.length;i++){Prepare(links[i]);}}function Prepare(el){var tooltip,t,b,s,l;t=el.getAttribute("title");if(t==null || t.length==0) t="link:";el.removeAttribute("title");tooltip=CreateEl("span","tooltip");s=CreateEl("span","top");s.appendChild(document.createTextNode(t));tooltip.appendChild(s);b=CreateEl("b","bottom");l=el.getAttribute("href");if(l.length>30) l=l.substr(0,27)+"...";b.appendChild(document.createTextNode(l));tooltip.appendChild(b);setOpacity(tooltip);el.tooltip=tooltip;el.onmouseover=showTooltip;el.onmouseout=hideTooltip;el.onmousemove=Locate;}function showTooltip(e){document.getElementById("btc").appendChild(this.tooltip);Locate(e);}function hideTooltip(e){var d=document.getElementById("btc");if(d.childNodes.length>0) d.removeChild(d.firstChild);}function setOpacity(el){el.style.filter="alpha(opacity:95)";el.style.KHTMLOpacity="0.95";el.style.MozOpacity="0.95";el.style.opacity="0.95";}function CreateEl(t,c){var x=document.createElement(t);x.className=c;x.style.display="block";return(x);}function AddCss(){var l=CreateEl("link");l.setAttribute("type","text/css");l.setAttribute("rel","stylesheet");l.setAttribute("href","?.css");l.setAttribute("media","screen");document.getElementsByTagName("head")[0].appendChild(l);}function Locate(e){var posx=0,posy=0;if(e==null) e=window.event;if(e.pageX || e.pageY){posx=e.pageX; posy=e.pageY;}else if(e.clientX || e.clientY){if(document.documentElement.scrollTop){posx=e.clientX+document.documentElement.scrollLeft;posy=e.clientY+document.documentElement.scrollTop;}else{posx=e.clientX+document.body.scrollLeft;posy=e.clientY+document.body.scrollTop;}}document.getElementById("btc").style.top=(posy+10)+"px";document.getElementById("btc").style.left=(posx-20)+"px";}</script><script type="text/javascript">window.onload=function(){enableTooltips()};</script><style type="text/css">body{font: 76%/1.5 Arial,sans-serif;background: #FFF;color: #333}div#container{width: 500px;margin:0 auto}h1{color: #3CA3FF;margin: 1em 0 0;letter-spacing: -2px}p{margin: 0 0 1.7em}a{color: #F60;font-weight:bold}a:hover{color: #F00}.tooltip{width: 200px; color:#000;font:lighter 11px/1.3 Arial,sans-serif;text-decoration:none;text-align:center}.tooltip span.top{padding: 30px 8px 0;     background: url(https://www.jb51.net/images/uppic/200708171844190.gif) no-repeat top}.tooltip b.bottom{padding:3px 8px 15px;color: #548912;     background: url(https://www.jb51.net/images/uppic/200708171844190.gif) no-repeat bottom}</style></head><body><div id="container"><p><a href="https://www.jb51.net/" title="Com@'s space">My space</a></p></div></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

频道导航

当鼠标滑过超链接出现提示框效果实例

您可能感兴趣的文章: