|
| |
 精品推荐 |
 |
|
| |
|
|
|
|
onMouseover的灵活运用
|
日期：2007年7月6日 作者： 查看:[大字体
中字体 小字体]
|
很多有过页面制作经验的人，为了丰富页面的动感，在设计数量众多的按钮时，通常都喜欢采用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="http://www.webjx.com/Htmldata/sort/firsta1.gif" border="0"></a>
<a href="#a" onMouseover="over(2)" onMouseout="out(2)">
<img name="image2" src="http://www.webjx.com/htmldata/sort/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>
上一篇:鼠标移动到一张图片时变为另一张图片
下一篇:如何制作渐变的按钮
|
| onMouseover的灵活运用 相关文章： |
|
|
|
| onMouseover的灵活运用 相关软件： |
|
| |
|
