“牵一发而动全局”onMouseover灵活运用x
来源：建议书 发布时间：2020-09-08 05:26:49 点击：
“ 牵一发而动全局”onMouseover 的灵活运用 <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
很多有过页面制作经验的人，为了丰富页面的动感，在设计数量众多的按钮时，通常都喜欢采用 onMouseover 这个函数。其效果就是当鼠标划过按钮时，按钮看起来会有一种起伏变化，从而成为一种独特的信息提示。
关于 onMouseover 可以有四种基本的表现形式：一图对一图、一图对多图、多图对一图、多图对多图。下面就让我们一一道来：
一图控制一图
开题中我们提到的这种效果就是一图对一图，它仅仅控制图自身的变化。
当鼠标划过图 a 的时候便换成图 c，当鼠标划过图 b 的时候便换成图 d。因为图 a 与图 c 的不同，看起来就会有视觉上的动感。而这在现在的页面设计中也是最常用的一种动态效果。
代码如程序 1 所示范：
<HEAD>
<script language="JavaScript">
var imgover= new Array(2);
var imgout=new Array(2);
for(i=1;i<=2;i++)
{
imgover[i]="firstb"+i+".gif";
imgout[i]="firsta"+i+".gif";
}
function over(i)
{
if(document.images)
document.images["image"+i].src=imgover[i];
}
function out(i)
{
if(document.images)
document.images["image"+i].src=imgout[i];
}
</script>
</HEAD>
<BODY>
<a href="#a" onMouseover="over(1)" onMouseout="out(1)">
<img name="image1" src="firsta1.gif" border="0"></a>
<a href="#a" onMouseover="over(2)" onMouseout="out(2)">
<img name="image2" src="firstb1.gif" border="0"></a>
</BODY>
</HTML>
（程序 1）
参看：http://www.gameclub.com.cn（游戏信息网）
我们还可以通过一图控制另一图的变化，让它变得更花哨一点。比如当鼠标划过图 a 的时候，让图 c 发生一些变化，这样一看起来会有一种视觉上的跳跃感。
参看：http://www.gliding.org.cn（华联滑翔伞俱乐部）
一图控制多图
当你的鼠标指针从“数字”按钮上划过时，图 2 上显示的是三张数字的图象，当你的鼠标指针从“字母”上划过时，图 2 显示的是图 3 中三张字母的图片。
代码如程序 2 所示范：
<HTML>
<HEAD>
<script language="JavaScript">
var overnum= new Array(3);
var overletter=new Array(3);
for(i=1;i<=3;i++)
{
overnum[i]="cyan0"+i+".jpg";
overletter[i]="cyan"+i+".gif";
}
function overn()
{
if(document.images)
{
document.images["image1"].src=overnum[1];
document.images["image2"].src=overnum[2];
document.images["image3"].src=overnum[3];
}
}
function overl()
{
if(document.images)
{
document.images["image1"].src=overletter[1];
document.images["image2"].src=overletter[2];
document.images["image3"].src=overletter[3];
}
}
</script>
</HEAD>
<BODY>
<img name="image1" src="cyan01.jpg" border="0"></a>
<img name="image2" src="cyan02.jpg" border="0"></a>
<img name="image3" src="cyan03.jpg" border="0"></a></br>
<a href="#a" onMouseover="overn()">数字</a>
<a href="#a" onMouseover="overl()">字母</a>
</BODY>
</HTML>
（程序 2）
想想看如果把这种效果用到自己的页面上，是不是也会有“牵一发而动全局”的快感呢？整个页面再也不是单一的罗列，简洁明快的风格一定会让你赏心悦目。具体的效果可以看 http://www.263.net.cn/capital/?MIval=C07_09 里的钓鱼栏目。
多图控制一图
如果页面中有四个栏目，而每一个栏目都有一大段的介绍，你是否会无奈的采取以下方法：将所有的文字紧密地压缩排列在一个页面上？现在不必了。告诉你个简便的方法就是用 onMouseover 来实现。
如图 4 所示，页面有四个独立栏目，鼠标停留在哪个栏目上，图 4 的方框中就会显示这个栏目的内容介绍。到 http://www.263.net.cn/capital/C05_18（中华传统养生）看看，你的体会将更深刻。至于源程序读者可以自行领会。
多图控制多图
多图控制多图是第二种情况与第三种情况的中和，也是最灵活的一种应用。如果你在合成页面的时候用的是 DREAMWEAVER 软件。你会发现在R 里你尽可以随心所欲的去设计。下面就跟着我在DREAMWEAVER2 中实现你的想法吧。
1、选中控制对象；
2、打开 Behaviours 工具框；
3、点击"+"增加功能，选"swap image"，弹出"swap image"对话框；
4、功能框中有两个选项"images"和"set source to"。在"images"中选择被控制的图，在"set source to"中设置控制图的变化对象。
虽然用 draemweaver 工具来实现 onMouseover 效果非常方便，但是页面的字节数一定会大于你手工编写的页面字节数。如何取舍就看你自己决定了。
如果你的控制图与被控制图在不同的两个 FRAME 中，你又如何来实现呢？其实很简单：
function tabOn(i)
{
if(document.images)
{
document.images["sr"+i].src=ftover[i]; （同 Frame 内）
parent.main.document.images["mainsrc"].src=ftovernext[i];
（不同 Frame 内）
}
}
这其中的窍门就是将另一个 Frame 的名字定义在控制图的前面。
具体效果请看：http://www.isdn.com.cn
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
推荐访问:全局 而动 灵活