巧用Behaviors改变对象属性（二）

　　上篇我们做了一个通过改变图层的背景来改变文本背景的例子，用图层的好处是Dreamweaver会自动给每一个图层加代号（或叫取名字），因此用起来比较方便，但由于层在和表格混合排版时效果不好，当然用子层能够解决，其方法我在关于“活用图层”的文章中已介绍过，在此不再重复。下面介绍的是不用图层而直接在文本上加载Behaviors动作的例子。

　　一、动态改变文字大小

图1 原文字

图2 鼠标移到这段文字上，文字将被放大，鼠标移开，文字恢复原大小

图3 单击鼠标时，文字的背景色改变了。

　　上面这种效果，用在网页上对一些视力不太好的访客是不是增加了亲切感？！下面讲具体的制作方法：
　　1、在页面上输入一段文本，由于Dreamweaver3对文本不支持Behaviors，所以我们变通一下，给文本加一个"span"标记，具体操作：打开源代码检视窗，在文本的开始加上这样的代码：< span id="mytext1" >在文本结束时加上：< /span >；
　　2、在文本上任意选取几个文字做一个空链接，在链接上打开Behaviors面板，加载改变文字大小的动作。具体操作：按Behaviors 面板上的“ ”图标，在菜单上选择“Change Property”， 在对话框的Type of Object中选择“Span”；在Number Object中选择“Span "mytext1"”；在Property中选择“font-size”；在New Value中输入“16pt”。按“OK”返回Behaviors面板；
　　3、由于Behaviors默认的触发事件是鼠标单击（onClick），我们来改一下，把触发事件改为鼠标移到对象上发生（onMouseOver ）具体操作：在Behaviors面板上点一下窗口中的动作代码，然后点击代码中间的那个倒三角接钮，在下拉出的的列表中选择“onMouseOver”即可，到此使文字变大的动作已基本完成；
　　4、为了获得当鼠标移开时文字恢复原来大小的效果，重复第二步操作，只是在对话框的New Value中输入原来文字的大小就行了。然后，象第三步那样把触发事件改为“onMouseOut”。
　　在本例中更有一个动作是改变文字的背景色，我想这在上一篇中已讲过，您应该会了吧？！在这里就不重复了。
　　5、由于上面的动作都是加载在那个终极链接上的，我们把他移到“span”上去。具体操作：打开源代码检视窗，把那些动作代码选取后拖到“span”标记中去。另外，Dreamweaver3在这里有一个"Bug"，他并没有把操作对象的名字加上去，那只得我们自己动手了，也就是在每一个动作的括号中的第一个单引号中加上操作对象的名字：mytext1。然后把那个终极链接删去，一切OK了。网页最终的这段源代码是这样的：
< span id="mytext1" style=" line-height:20pt;" onClick="MM_changeProp('mytext1','','style.backgroundColor', '#ffffcc','SPAN')" onMouseOver="MM_changeProp('mytext1','','style.fontSize', '16pt','SPAN')" onMouseOut="MM_changeProp('mytext1','','style.fontSize', '9pt','SPAN')" >
鼠标移到这段文字上，文字将被放大；当单击鼠标时，将改变这段文字的背景色。
< /span >
　　您可能看到在上面的代码中还增加一句代码：style=" line-height:20pt;" 这是为考虑到文字增大后行距也应相应增大而配置的。按F12就能够看到预期的效果了。

　　二、变色按钮
　　
　　图4 立体按钮　　　　图5鼠标移到按钮上颜色变化了

　　上面这个立体按钮，您不要以为是用图片制作的，他压根就没有用图片。他实际上是上例中改变文本背景色的实际应用。但在本例中由于按钮本身需要终极链接，因此给我们省了不少事。另外我在本例中没有用“span”标记，而是用了“div”标记，这不是我故弄玄虚，而是考虑到其一，我们在对按钮上的文字居中时会产生一个“div”标记；其二，告诉您在任何能够加代号的标记中，只要加上代号都能够对其施加动作。下面我们来看看这个会变色的按钮的具体制作方法。
　　1、插入一个1*1的表格，若要制作多个按钮则可插入一个多行多列的表格；
　　2、把表格的背景色配置为：#CCFFCC；单元格的背景色配置为：#CCCCFF；boder配置为“1”；Light Brdr：#00000；Dark Brdr：#FFFFFF。这样做的目的是使按钮产生立体感；
　　3、在表格中输入按钮的名称，并把他居中（将产生一个"div"标记），在网页源代码中的“div”给他加个名字：mybottun。
　　4、把按钮的名称做成终极链接，并在终极链接上加载两个Behaviors的改变背景色的动作，一个的触发事件是“onMouseOver”；另一个的触发事件是“onMouseOut”。动作的施加对象是“div”的“mybottun”。具体操作方法和上例相同，不再重复。最终的按钮代码是这样的
< table width="10%" border="1" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#CCFFCC" >
< tr bgcolor="#CCCCFF" >
< td >
< div id="mybottun" align="center" >< a href="#" onMouseOver="MM_changeProp('mybottun','','style.backgroundColor','#ffffcc','DIV')" onMouseOut="MM_changeProp('mybottun','','style.backgroundColor','#ccccff','DIV')">变色按钮< /a >< /div >
< /td >
< /tr >
< /table >

　　怎么样？不难吧！下面再讲一个图象的例子。

　　三、变换图片
　　
　　图6 原图　　　　　　　　图7 鼠标移到图片上就换了一张图片

　　上图表示的效果是当您把鼠标移到图片上时，就换了一张图片；当您把鼠标移开图片时，他又恢复了原来的图片。这种动态效果同样是用Behaviors的Change Property动作功能实现的。下面讲具体方法：

标签：