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

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </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软件。你会发现在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  <script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
阅读更多
个人分类: javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭