当前位置学海荡舟 -> 电脑乐园 -> 网页制作技巧


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

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

  源码粘贴框:

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

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

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

在链接中插入语句

  其中swap()是一个函数,在下一步中将要定义它,我们分别在“电脑交互教程”的链接中加入“onMouseOver="swap(1)"”,在“共享软件下载”的链接中加入“onMouseOver="swap(2)"”,在“硬件追踪”的链接中加入“onMouseOver="swap(3)"”;

  3、在html文件的“<head>”中添加如下JavaScript语句:

代码解释

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

欢迎你接着看下一个技巧