基于JavaScript的多功能链接函数

Author: 周辉腾 Date: 2000年 第48期

  今天介绍的这个多功能链接函数可以轻松实现链接的滚动提示和浏览器状态栏提示以及定义鼠标风格,让你的网页显得又酷又具有个性(见^48040203a^)。
  首先,编写以下JavaScript函数,把它插在<head>……</head>之间的“<script language=″JavaScript″><!--”以及“//--</script>”标签之间。
  //滚动提示显示函数
function showtip(strTipText){
  /*定义滚动提示的字体样式*/
 var strStyle=′style=″border:1px solid black;color:rgb(0,0,128);font-family:宋体;font-size:9pt″′;
  //如果客户端浏览器是IE并且本文档已经全部下载
if(document.all && document.readyState==″complete″){
  //定义IE对层的访问对象
var strThisObj=document.all.tipLayer;
  /*将滚动提示写入滚动提示层中*/
strThisObj.innerHTML=′<marquee ′+strStyle+′>′+strTipText+′</marquee>′;
  /*将提示层离屏幕左边的像素距离置为鼠标当前坐标(即event.clientX)与网页边距(即document.body.scrollLeft)之和,再加上10*/
strThisObj.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
  /*与上一行结合,将滚动提示所在层移动到鼠标右下10个像素的地方*/
strThisObj.style.pixelTop=event.clientY+document.body.scrollTop+10;
  //显示滚动提示层
strThisObj.style.visibility=″visible″;
  }
  }
  //隐藏滚动提示函数
function hidetip(){
  if(document.all) document.all.tipLayer.style.visibility=″hidden″;
  }
  //链接生成函数,需要调用上面的两个函数
function hrefmaker(strText,strUrl){
  var argv,argc,intDisNum,strDes,strTarget,strStyle;
  //向本函数传递的参数数组
argv=hrefmaker.arguments;
//参数个数
argc=argv.length;
  //如果没有给出“详细提示”参数,将链接文字作为提示内容
strDes=(argc>2 && argv[2]!=′′)?(strText+′:′+argv[2]):strText;
  //默认目标是“新建窗口”
strTarget=(argc>3 && argv[3]!=′′)?argv[3]:′_blank′;
  //默认此链接的鼠标样式为“手”
strStyle=(argc>4 && argv[4]!=′′)?argv[4]:′hand′;
  /* 本行代码的作用是调用所给参数输出超级链接,并根据参数的具体情况构造鼠标经过时的滚动提示、浏览器状态栏提示等。 */
    self.document.write(′<a href=″′+strUrl+′″ target=″′+strTarget+′″ style=″cursor:′+strStyle+′″ OnmouseOver=″showtip(\′′+strDes+′\′);window.status=\′′+strDes+′\′;return true″ OnmouseOut=″hidetip(\′tipLayer\′);window.status=\′\′″>′+strText+′</a><br>′);
  }
  其次,在网页的主体(<body>……</body>)的任意部分插入以下代码,本部分用于构造滚动提示所需要的“层”:
  <!-- 以下部分除了样式定义语句不必改动。这是定义一个Div用于构造滚动提示所需要的层,用“tipLayer”作为它的标识。本层的初始化样式为:不可见、宽度为150个像素、背景为淡黄色。 -->
  <div id=″tipLayer″ style=″position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:lightyellow″>
  </div>
  最后,就是调用上面的“劳动成果”了。在网页主体部分(<body>……</body>)的想插入个性化链接的地方插入类似以下语句的代码:
  <script language=″JavaScript″><!--
  hrefmaker(′欢迎访问电脑报读者俱乐部′,′http://www.pcwclub.com/′,′读者俱乐部是读者和编辑交流的捷径′,′_blank′,′help′);
  hrefmaker(′天极网′,′http://www.yesky.com/′,′′,′′,′wait′);
  //--></script>
  现对所调用得链接函数的参数简要说明如下:第一个至第五个参数为依次为1.链接文字;2.链接的URL;3.链接补充说明,将出现在滚动提示和浏览器状态栏中;4.链接的目标;5.链接的鼠标样式,仅IE支持;除了第一个和第二个参数其他参数皆可省略,空的参数可以用英文半角引号“′′”表示。
  呵呵,完成啦。赶快实践一下吧!