鼠标放上去触发一个javascript提示框效果代码

更新时间：2008年08月17日 17:13:29 作者：

这个提示框里面有链接文字与图片（icon）出现。而且鼠标能移上去点击这个链接的

感觉要连接没什么意义～　又不能点击
改这里
//s.appendChild(document.createTextNode(t)); 改动
s.innerHTML = t;

<html><script type="text/javascript"> function enableTooltips(id){ var links,i,h; if(!document.getElementById || !document.getElementsByTagName) return; 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("message"); if(t==null || t.length==0) return ; el.removeAttribute("message"); tooltip=CreateEl("span","tooltip"); s=CreateEl("span","top"); //s.appendChild(document.createTextNode(t)); 改动 s.innerHTML = 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 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, span, table{able-layout: fixed; word-wrap:break-word;} 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{ width: 200px; color:#000; font:lighter 11px/1.3 Arial,sans-serif; text-decoration:none;text-align:center} .tooltip span.top{ text-align:left; text-indent:1em; padding: 30px 8px; background: url(/upload/20080817171524699.gif) no-repeat top; } .tooltip b.bottom{padding:3px 8px 15px;color: #548912; background: url(/upload/20080817171524699.gif) no-repeat bottom; } </style> <div id="container">  <a href="j111.html" title="我是title" message="这年头，和尚庙的香火越烧越旺，求保佑、求发财、求治病,乃至求升官和求升学的人一窝蜂涌进庙门,<a href='#'>简直要把门槛</a>踏烂.不过这些见菩萨就烧香磕头的信徒中,到底知道佛门是怎么回事的，恐怕不多。今天，在下也来道个究竟。">狼跋其胡，载踬其尾。公孙硕肤，赤舄几几。 找到彻底解脱的办法就是一个死字，</a> </div> </html>

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

您可能感兴趣的文章: