“牵一发而动全局”onMouseover的灵活运用.docVIP

“牵一发而动全局”onMouseover的灵活运用 “牵一发而动全局”onMouseover的灵活运用 作者：佚名 文章来源：网易 点击数：805 更新时间：2004-8-25 　很多有过页面制作经验的人，为了丰富页面的动感，在设计数量众多的按钮时，通常都喜欢采用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） 　　参看：（游戏信息网） 　　我们还可以通过一图控制另一图的变化，让它变得更花哨一点。比如当鼠标划过图a的时候，让图c发生一些变化，这样一看起来会有一种视觉上的跳跃感。 　　参看：（华联滑翔伞俱乐部） 　　一图控制多图 　　当你的鼠标指针从“数字”按钮上划过时，图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=ima