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

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

你一定看到很多网页使用了这样的技巧，当鼠标移到某一个链接上时，在页面的其它位置会出现一段对链接的解释性文字，请看下面演示： 电脑交互教程 共享软件下载 硬件追踪

1.在三个链接的代码中添加onMouseOver()语句

<a href="/pc/pcketang/index.htm" onMouseOver="swap(1)" class="p2">电脑交互教程</a>
<a href="/pc/softdown/index.htm" onMouseOver="swap(2)" class="p2">共享软件下载</a>
<a href="/pc/hangqing/index.htm" onMouseOver="swap(3)" class="p2">硬件追踪</a>

2.在html文件的“&lt;head&gt;”中添加如下javascript语句：

<script language="javascript">
<!--
text=new Array(4);
text[0]=new Image(); text[0].src="img/text0.gif";
text[1]=new Image(); text[1].src="img/text1.gif";
text[2]=new Image(); text[2].src="img/text2.gif";
text[3]=new Image(); text[3].src="img/text3.gif";
function swap(t)
{

  if(t>0)
   document.TEXT0.src=text[t].src
  else
   document.TEXT0.src=text[0].src 

}
//-－>
</script>

　这样的效果我们采用javascript很容易就能实现，下面我们来具体做一下：

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

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

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

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

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

♡ 点赞 0

☆ 收藏 0

留言区（共0条）