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

2008-02-23 06:14:14来源：互联网阅读 ()

　　用Behaviors的Change Property动作功能，能够动态地改变文本的任何属性，如文字的背景色、大小、字体、加粗等等，甚至能够加上滤镜或替换一段文本；对于图象的则能够动态地替换。下面我们通过几个例子来说明其使用方法。

　　一、改变文字的背景
　　我们先看下面的效图，他的实际效果是这样的，当点击左边那个改变背色的按钮后，文本的背景色换一种颜色，当点击右边的按钮后，文本又换一种背景色。总之当您点击不同的换色按钮后，文本的背景色也随之改变。

图1 原来的背景色

图2 点击左边的按钮后背景色改变了

图3 点击右边的按钮后背景色又改变了

　　制作方法：
　　1、插入一个层（或利用现有的层），并在该层上写点文字或其他什么东西均可，主要是让人知道该区域的存在；
　　2、在页页上写上这样的文字“点击这里改变上面文字的颜色”（当然您也能够输入别的文字），选取这段文字，并把他做成空链接，也就是在属性面板的“Link”输入框中输入一个“#”。用鼠标点一下这个空终极连接后，按F8键调出Behaviors面板，点击面板上的“ ”图标，在弹出的菜单中选择Change Propty动作，将弹出一个如下图所示的对话框：

图4 Change Property动作对话框

　　在上图所示的对话框中：Type of Object的输入窗是供我们选择控制对象，也就是讲我们想要改变那一个对象的属性，在本例中，我们按右边的倒三角按钮，然后在下拉出的列表中选择“Layer”；
　　Number Object的输入窗是供选择对象的代号的，因为Behaviors实际上插入一段Javascript程式，而Javascript程式要对对象施加动作，首先必须知道对象是谁，对象的代号（也可理解为就是对象的名字）是唯一能识别对象的标识。在本例中，我们点击输入框右边的倒三角按钮，在下拉出的“层代号”列表中选择刚插入层的代号，如：“Layer1”；
　　Property中有两种可选输入，我们在这里选择要改变的具体属性，在Select选择框右边的倒三角按钮上点一下，在下拉出的菜单中选择择“Style.backgroundcolor”；
　　在New Values右边的输入窗中输入背景颜色代码（如#ccffff）；按“OK”按钮返回到Behaviors面板，您看到了吧！在面板下部的窗口中增加了一行代码：onClick Change Property，这就是告诉您，对那个空终极链接加载了一个动作，动作的触发事件是onClick（单击鼠标），动作内容是改变对象属性。若您用鼠标点击这行代码，将看到中间有一个倒三角按钮，您点一下那个按钮，将下拉出一个触发事件的列表，那上面有许多触发事件供选择，如：onClick（单击鼠标）、onDbClick（双击鼠标）、onMouseDown（按下鼠标）、onMouseOut（鼠标移开）、onMouseOver（鼠标称到对象上）等等，您看Dreamweaver想得都周到（若您把Behaviors面板上的“Event for”配置为IE5.0将会有更多的触发事件）！按F12，再把鼠标在那个空终极链接上单击一下，您看那段文本的背景色改变了是不是！。您再打开源代码检视窗看看，Behaviors都干了些什么？他在那个空终极链接的标记中加了这样一行代码： onClick="MM_changeProp('Layer7','','style.backgroundColor','#ccffff','LAYER')"；在< head >和< /head >这间加了这样一段Javascript程式：
< script language="JavaScript" >
< !--
function MM_changeProp(objName,x,theProp,theValue) { //v3.0
var obj = MM_findObj(objName);
if (obj && (theProp.indexOf("style.")==-1 || obj.style)) eval("obj." theProp "='" theValue "'");
}
//-- >
< /script >

　　您看Behaviors多么能干！上面讲得这么周详，主要是怕您被那一大堆参数弄得手忙脚乱。把背景改变成另一种颜色的那个终极链接我不讲您也会做了吧？关于改变对象属性的深一层技巧，请看下篇。我想您也累了，休息一下吧！