首页 > 网络编程 > JavaScript > 网页特效 > 状态特效 > javascript提示框

鼠标放上去触发一个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需刷新才能执行]

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

您可能感兴趣的文章: