网奇CMS - 成熟易用的.NET网站管理系统
旧版官网 | 客服论坛 | 彩虹服务 | 加入收藏 | TEL:400-600-2788

实现鼠标移过链接时特定响应

  当鼠标移到某一个链接上时,一定看到很多网页使用了这样的技巧。页面的其它位置会出现一段对链接的解释性文字,请看下面演示:

  1.三个链接的代码中添加onMouseOv语句<ahref="/pc/pcketang/index.htm"onMouseOver="swap1"class="p2">电脑交互教程</a><ahref="/pc/softdown/index.htm"onMouseOver="swap2"class="p2">共享软件下载</a><ahref="/pc/hangqing/index.htm"onMouseOver="swap3"class="p2">硬件追踪</a>

  2.html文件的&lt;head&gt;中添加如下JavaScript语句:<scriptlanguage="JavaScript"><!--text=newArrai4;text[0]=newImage;text[0]. src="img/text0.gif";text[1]=newImage;text[1]. src="img/text1.gif";text[2]=newImage;text[2]. src="img/text2.gif";text[3]=newImage;text[3]. src="img/text3.gif";functswapt{ ift>0 document.TEXT0. src=text[t].src else document.TEXT0. src=text[0].src }//-></script>

  这样的效果采用JavaScript很容易就能实现,下面我来具体做一下:

  1.把介绍性文字或图片制作成几幅高宽相同的gif图,上面例子中我制作了四幅图,分别作为默认的图片和三个介绍性的图片,分别命名为text0-text3,然后我把默认的图片插入固定位置,并给此图象对象命名为TEXT0

  2.然后在三个链接的代码中添加onMouseOv语句,这个语句的作用是当鼠标移动到链接上面时,让顺序控制出现什么响应;如下图的位置加入这样的语句:

  其中swap一个函数,下一步中将要定义它分别在电脑交互教程”链接中加入“onMouseOver="swap1"共享软件下载”链接中加入“onMouseOver="swap2"硬件追踪”链接中加入“onMouseOver="swap3"

  3.html文件的<head>中添加如下JavaScript语句:

  做完以上的工作,浏览器中就能看到如前面所示的效果了提醒你并不是所有的浏览器都支持此效果,另外在加入JavaScript语句的时候一定要注意区分大小写噢。也可以利用此技巧的原理为网页增添其它JnMouseOv响应效果。

0 顶一下 打印 阅读:
界面制作中最有帮助的文章