|
巧用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动作功能实现的。下面讲具体方法： 1、插入一张图片，并取名为：myimage（为什么要取名，我想你应该明白了吧！）； 2、给图片加两个Behaviors的Change Property动作，由于Dremweaver3支持给图象加动作，操作起来可方便多了。操作步骤：选取图片，按F8调出Behaviors面板，点击面板上的“+”图标，在拉出的菜单中选择“Change Property”加载动作， 在对话框的Type of Object中选择“Img”；在Number Object中选择“image "myimage"”；在Property中选择“src”；在New Value中输入“图片的文件名（含相对路径）”，在我的网站上是“image/cssp2.jpg”。按“OK”返回Behaviors面板，把触发事件改为：onMouseOver； 3、重复上一步操作，只是在对话框的New Value 中输入当前图片的路径即可，再把触发事件改为：onMouseOut。到此全部完工，按F12，你将看到与我这里同样的效果了。我们再来看看网页的源代码，最终图片的Img标记的代码如下所示： < a href="#" onMouseOver="MM_changeProp('myimage','','src','image/cssp2.jpg','IMG')" onMouseOut="MM_changeProp('myimage','','src','image/cssp1.jpg','IMG')" > < img src="image/cssp1.jpg" width="200" height="134" name="myimage" border="0" align="left" >< /a > 哈哈！原来Behaviors自动把图象加了一个空链接，当然在< head >与< /head >之间用的还是同上例同样的一段Javascript程序。这个小滑头！^_^
|
|
赛迪网
|
|
本站检索
|
|
中华网推荐
|
