醒目:当鼠标移动到按钮区域内,出现提示如何实现?

就是那种把鼠标放上去,介绍此按钮所连接的网页的主要内容的那种提示
---------------------------------------------------------------

1. 用系统的提示

1<input onclick="window.location.href='http://www.csdn.net/'" title="CSDN 中国程序员大本营" type="button" value="link"/>

2. 自己用图层来做:
---------------------------------------------------------------
1. 提示换行:

1<input onclick="window.location.href='http://www.csdn.net/'" title="CSDN
2中国
3程序员
4大本营" type="button" value="link"/>

2. 用图层:

 1<html><head><title>层与按钮对齐</title></head><body>
 2<div align="left"><table border="1" height="50" width="600">
 3<tr align="center">
 4<td>
 5<input alt="提示信息一" onmouseout="document.all.pop.style.display='none'" onmouseover="cc(this)" type="button" value="ok"/>
 6</td><td>
 7<input alt="提示信息二" onmouseout="document.all.pop.style.display='none'" onmouseover="cc(this)" type="button" value="ok"/>
 8</td><td>
 9<input alt="提示信息三" onmouseout="document.all.pop.style.display='none'" onmouseover="cc(this)" type="button" value="ok"/>
10</td></tr>
11</table><div>
12<div id="pop" style="   
13position: absolute;   
14width: 120;   
15height: 30;   
16z-index: 99;   
17display: none;   
18background-color: #FF0000">   
19图层文字</div>
20<script language="javascript">   
21function cc(tt)   
22{   
23var e = document.getElementById("pop");   
24var t = tt.offsetTop; //TT控件的定位点高   
25var h = tt.clientHeight; //TT控件本身的高   
26var l = tt.offsetLeft; //TT控件的定位点宽   
27var ttyp = tt.type; //TT控件的类型   
28while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;}   
29e.style.top = (ttyp=="image")? t + h : t + h + 6; //层的 Y 坐标   
30e.style.left = l + 1; //层的 X 坐标   
31e.style.display = "block"; //层显示   
32e.innerText = window.event.srcElement.alt;   
33}   
34</script>
35</div></div></body></html>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus