Javascript脚本特效示例:[15]信息框显示链接
1、在桌机上新建文本文档,命名为晓博JavaScript特效测试.txt,在文本文档里中入HTML文档的基本元素如下,并保存。
<html>
<head>
<title>晓博JavaScript特效测试</title>
</head>
<body>
<div id="zy">
<div id="login"></div>
<div id="daohang">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="jianjie.html">七夕简介</a></li>
<li><a href="#">七夕节传说</a></li>
<li><a href="#">七夕节习俗</a></li>
<li><a href="#">诗词& 歌谣</a></li>
<li><a href="#">七夕节寄语</a></li>
</ul>
</div>
</div>
</body>
</html>
![Javascript脚本特效示例:[15]信息框显示链接](https://exp-picture.cdn.bcebos.com/c6b994775ddd884cc79bd3946cef28066a01f664.jpg)
![Javascript脚本特效示例:[15]信息框显示链接](https://exp-picture.cdn.bcebos.com/2e66f9ef28066b01b50ccff33df39187021cf364.jpg)
2、第一步:把如下代码加入<head>区域中(你可以对链接及说明作相应修改)
<SCRIPT Language="JavaScript">
<!-- Hide from JavaImpaired Browsers
function MakeArray(n) {
this.length = n;
for (var i = 1; i <= n; i++) {
this[i] = 0 }
return this
}
var ToolTips = new MakeArray(1);
ToolTips[0] = 1;
ToolTips[1] = "聊天室";
ToolTips[2] = "搜索引擎";
ToolTips[3] = "把鼠标放到链接上看看信息框的信息。";
function writeTip(imgIndex ){
document.hform.tips.value=(ToolTips[imgIndex]);} //--></Script>
3、第二步:把如下代码加入<body>区域中
<FORM NAME='hform'>
<INPUT TYPE="text" NAME="tips" SIZE="70" value="把鼠标放到链接上看看信息框的信息。"></FORM><CENTER><A HREF="http://hi.baidu.com/yedeqixian"onMouseOver="writeTip(1);return true" onMouseOut="writeTip(3)">聊天室</A> | <A HREF="http://hi.baidu.com/yedeqixian" onMouseOver="writeTip(2);return true" onMouseOut="writeTip(3)">搜索引擎</A></CENTER>
4、用IE浏览器打开晓博JavaScript特效测试.html文件,可以看到信息框显示链接特效,文本框有相应的信息变换,可以到达作者的个人百度空间如下图
![Javascript脚本特效示例:[15]信息框显示链接](https://exp-picture.cdn.bcebos.com/90c61d1c99c0affccf57d89c2372941fbfe4ea64.jpg)
![Javascript脚本特效示例:[15]信息框显示链接](https://exp-picture.cdn.bcebos.com/256eb672941fbee4070b0cedc1237971ff1de764.jpg)
![Javascript脚本特效示例:[15]信息框显示链接](https://exp-picture.cdn.bcebos.com/955ea0e434daf05e7ff285c2751d96d81919e564.jpg)
![Javascript脚本特效示例:[15]信息框显示链接](https://exp-picture.cdn.bcebos.com/359bee5e4a237971c9cc6a6b93196120a6cde364.jpg)