模仿windows帮助文件中词语注释的脚本,效果很逼真,能够变化的地方很多,内容可以夹带链接,很不错!
制作方法:
先建立外部样式,并建立外部样式的链接。下载 外部样式文件 ,代码如下:
A.helpLink {COLOR: #999999; font-size:10px; TEXT-DECORATION: none;font-family:tahoma;}
A.helpLink:hover {COLOR: #333333; font-size:10px; TEXT-DECORATION: none;font-family:tahoma;}
.help-tooltip {BORDER-RIGHT: windowframe 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: windowframe 1px solid; PADDING-LEFT: 3px; Z-INDEX: 10000; BACKGROUND: infobackground; FILTER: progid:DXImageTransform.Microsoft.Shadow(color="#777777", Direction=135, Strength=3); PADDING-BOTTOM: 3px; FONT: Status-Bar; BORDER-LEFT: windowframe 1px solid; WIDTH: 250px; COLOR: infotext; PADDING-TOP: 3px; BORDER-BOTTOM: windowframe 1px solid; POSITION: absolute}
.help-tooltip A {BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: blue! important}
.help-tooltip A:hover {BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: blue! important}
在<head>中链接 helptip.js 文件。下载 helptip.js ,代码如下:
<script type="text/JavaScript" src=http://www.blue1000.com/article/"helptip.js"></script>
<SCRIPT type=text/JavaScript>
var sJsHelp = "JavaScript is also known as JScript but the formal name is ECMAScript.";
</SCRIPT>
在超链接处,添加如下代码:
a class="helpLink" href="http://www.blue1000.com/article/?" onclick="showHelpTip(event, sJsHelp); return false"
至此你就可以完成这个实例了,快去试试吧
本文作者: