|
|
“牵一发而动全局”onMouseover的灵活运用
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
广告招租，e-mail:yesize@hotmail.com 很多有过页面制作经验的人，为了丰富页面的动感，在设计数量众多的按钮时，通常都喜欢采用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软件。你会发现在DREAMWEAVER里你尽可以随心所欲的去设计。下面就跟着我在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
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
加入最爱
热门小游戏分类 
