onMouseover的灵活运用

时间:2010-03-23 19:41:25  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:形式:一图对一图、一图对多图、多图对一图、多图对多图。下面就让我们一一道来:   一图控制一图   开题中我们提到的这种效果就是一图对一图,它仅仅控制图自身的变化。   当鼠标划过图a的时候便换成图c,当鼠标划过图b的时候便换成图d。因为图a与图c的不同,看起来就会有视觉上的动感。而这在现在的页面设计中也是最常用的一种动态效果。
  正文:很多有过页面制作经验的人,为了丰富页面的动感,在设计数量众多的按钮时,通常都喜欢采用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>
"onMouseover的灵活运用"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13333.html


关键字:

关于《onMouseover的灵活运用》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td