ToolTip效果通过Js实现代替超链接中的title

ToolTip效果通过Js实现代替超链接中的titleToolTip效果通过Js实现代替超链接中的titleView Code
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <html>
 3 <head>
 4     <title>自定义Tooltip特效</title>
 5     <style type="text/css">
 6         body ul
 7         {
 8             list-style: none;
 9         }
10         
11         body li
12         {
13             margin: 60px;
14         }
15         
16         div
17         {
18             border: 1px solid #CCC;
19             padding: 10px;
20             background: #dff5ff;
21             margin-left: 30px;
22         }
23     </style>
24     <!--通过js,代替超链接中的title-->
25     <script language="javascript" type="text/javascript">
26         function initEvent() {
27             var links = document.getElementsByTagName("a");
28 
29             for (var i = 0; i < links.length; i++) {
30                 var link = links[i];
31                 link.onmouseover = linkOnMouseOver;
32                 link.onmouseout = linkOnMouseOut;
33             }
34         }
35 
36         function linkOnMouseOver() {
37             var newdiv = document.createElement("div");
38             newdiv.className = "Tooltip";
39             newdiv.style.position = "absolute";
40             newdiv.style.top = window.event.clientY;
41             newdiv.style.left = window.event.clientX;
42 
43             newdiv.innerHTML = "我是自定义的Tooltip,用来代替超链接中的title";
44             document.body.appendChild(newdiv);
45         }
46 
47         function linkOnMouseOut() {
48             var divs = document.getElementsByTagName("div");
49             for (var i = 0; i < divs.length; i++) {
50                 var newdiv = divs[i];
51                 if (newdiv.className == "Tooltip") {
52                     document.body.removeChild(newdiv);
53                 }
54             }
55         }
56     </script>
57 </head>
58 <body onload="initEvent()">
59     <ul>
60         <li><href="#" title="百度搜索引擎" target="_blank">百度</a></li>
61         <li><href="#" title="今天你山寨了吗?" target="_blank">腾讯</a></li>
62         <li><href="#" title="新浪微博" target="_blank">新浪</a></li>
63         <li><href="#" title="搜你输入法真好用" target="_blank">搜狐</a></li>
64     </ul>
65 </body>
66 </html>
上一篇:SQL:使用备份向导、SQL命令、导出数据三种方式对已建立的数据库进行备份


下一篇:【发布园子模板--透明模板】淡蓝雨伞 兼容IE7 IE8 IE9 FF IE6放弃……