onMouseover的灵活运用_Web开发_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

onMouseover的灵活运用

作者：闵涛文章来源：闵涛的学习笔记点击数：574 更新时间：2009/4/23 11:21:12

　很多有过页面制作经验的人，为了丰富页面的动感，在设计数量众多的按钮时，通常都喜欢采用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

没有相关教程

教程录入：mintao 责任编辑：mintao

上一篇教程：鼠标移动到一张图片时变为另一张图片

下一篇教程：利用Javascript建立Web应用

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……