中华网通行证
用户名 密码
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  

巧用Behaviors制动态按钮
 冯永曜  黄山村夫

  在你的网页上适当地放几个图象动态按钮,可起到画龙点睛的效果,曾有人还制作了一个专门制作动态按钮的叫做“按钮工厂”的工具软件,可见动态按钮功效之一斑。其实用Behaviors的Swap Image动作来制作动态按钮是手到拈来的事,根本用不着什么专门的工具软件。下面这实例是这样的效果。当鼠标移到按钮上,按钮的图片立即变换,单击按钮将打开一个网页。
  下面我们讲具体的制作方法:
  1、要制作上面这种效果的动态按钮,必需准备两张同样大小的图片,然后插入一张图片;
  2、选取图片,在图片的属性面板上的“Link”输入框中填上要链接的网页文件名(含相对路径),若你记不清楚文件名的话,可用输入框右面的象瞄准器似的那个东东打开文件夹选择要找开的网页,另外不要忘记在图象的属性面板上给图片加上名称(不是图片的文件名)如“image1”,这个名称是用来告诉Javascript程序要对那张图片进行变换的,其重要性我在前面的文章中间多次提及,在此不再重复。
  3、按F8调出Behaviors面板,按面板上的“+”图标,在拉出的动作列表中选择Swap Image动作,就会弹出如下图所示的对话框:

  图1 Swap Image动作对话框

  上面这个Swap Image动作对话框比较简单,中要在“Set Source to:”右面的输入框中输入第二张图片的文件名(含相对路径)就行了,当然你也可以点击输入框右面的“Browse...”按钮打开文件夹来选择图片。其它的参数不用管它,使用默认值。若你不是选取了图片后按F8的(如后面讲的那个例子是点超级链接后按F8),那么还要在第一个框中选择图象的名称,特别是当你的网页上有多张图片时更是如此。按OK按钮,返回Behaviors面板。我们看到在Behaviors面板的窗口中一下加了两个动作,一个是onMouseOver Swap Image ,这个动作的意思是当鼠标移到按钮上时,变换图片,也就是显示第二张图片;另一个动作是onMouseOut SWap Image Restore,这个动作的意思是当鼠标移开按钮时,恢复到原来的图片,即显示第一张图片。这正是我们所希望的效果,Behaviors就是这么聪明,一切都给我们想好了。从而使得我们只要点几下鼠标,就把动态按钮做好了。
  当然,Swap Image动作的作用不仅仅是用来制作动态按钮,还可以做出许多网页特效。例如:准备两面张图片, 一张是完全透明的图片,看起来好象什么都没有,另一张是有内容的图片,我们用一个超级链接来控制图片的变换。那么当鼠标移到超级链接上时,图片显示了,当鼠标移开超级链接时,图片又消失了,好象是招之即来,挥之即去,是不是有意思,不信你试试。


 赛迪网 


 

 
更多本栏目内容
??Windows 2000系统安全设置攻略
??Dreamweaver编写CSS需要掌握的技巧
??使用Flash MX过程中的3个小技巧
??拖IE9网站图标到Win7任务栏 精彩好礼任你拿
??从此不再耗流量?Google离线地图试用
??给瑞星添加移动存储自动杀毒功能
??一周壁纸榜单 靓丽风景伴您欢度周末
??金山网络七款软件齐升级 炫丽界面贺新春
??提升网站流量和权重 百度热榜排第一
预警:电商促销引钓鱼 七夕网购需谨慎

本站检索



中华网推荐

·国家级治脑病新药思维源
·中藏药治疗脑病新突破
·治类风湿,强直性脊柱炎
·养肾·痛风·长寿
·肝病泌尿脑萎缩新药介绍
·强直性脊柱炎康复乐园
·让中医辩证不孕不育
·国医治股骨头坏死一绝
·乙肝为何久治不愈?
·二千元垄断批发做老板
·中医中药专治前列腺
·治牛皮癣白癜风已成现实
·专治痛风病的白衣天使
·不孕不育的杏林奇葩
·专卖店零售管理系统





   

网络教室编辑信箱