|
巧用Behaviors改变对象属性（一）
一、改变文字的背景 我们先看下面的效图，它的实际效果是这样的，当点击左边那个改变背色的按钮后，文本的背景色换一种颜色，当点击右边的按钮后，文本又换一种背景色。总之当你点击不同的换色按钮后，文本的背景色也随之改变。  图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多么能干！上面讲得这么详细，主要是怕你被那一大堆参数弄得手忙脚乱。把背景改变成另一种颜色的那个超级链接我不讲你也会做了吧？关于改变对象属性的深一层技巧，请看下篇。我想你也累了，休息一下吧！
|
|
赛迪网
|
|
本站检索
|
|
中华网推荐
|
