上网时常遇到这样的网页：页面上只显示一张图片，当光标移动到图片上时，就会显示一个隐藏的AP元素，而光标从图片上移开时，AP元素又被隐藏起来。这是比较常用的处理技巧，会非常节约版面空间。例如：当光标移动到图8-13所示图片上时，隐藏的AP元素显示，如图8-14所示。光标离开图片时AP元素内容隐藏。
实现此例的操作步骤如下：
启动Dreamweaver CS6，新建一个HTML文档，并设置其背景图像。新建一个CSS规则，设置选择器类型为“类”，选择器名称为“.bgstyle”。单击“确定”按钮打开规则定义对话框，选择“背景”分类，设置背景不平铺，背景位置（X）为“right”，背景位置（Y）为“bottom”。单击“确定”按钮关闭对话框。在“文档”窗口选中<body>标签，单击鼠标右键，在弹出的下拉菜单中选择“设置类”|“bgstyle”。
图8-13 实例图片
图8-14 显示效果
在文档窗口中插入一个一行二列的表格，表格宽度为600像素，并在属性面板中设置“对齐”方式为“居中对齐”。然后设置单元格内容水平和垂直对齐方式均为居中，在第一行第一列的单元格中插入图片。
在第二列单元格中输入文本“Dreamweaver CS6DIY教程”，并新建CSS规则，设置文本居中放置，字体大小设为56，颜色设为“#F00”（红色）。
单击“插入”栏“布局”面板中的插入AP元素的图标
，在文档设计视图中插入一个AP元素。调整AP元素大小及位置。这时在设计视图中的效果如图8-15所示。
在AP元素内输入文本，然后执行“窗口”|“AP元素”命令打开AP元素管理面板，单击AP元素名称前的眼睛使之闭眼，如图8-16所示。这样，AP元素在网页打开时是不可见的。
用鼠标单击图片或单击文档窗口中状态栏上HTML标识符<img>，表示选择该图片，执行“窗口”|“行为”命令，出现“行为”面板。(www.daowen.com)
图8-15 插入AP元素
图8-16 设置apDiv为不可见
单击行为面板左边的加号（+）按钮，从弹出的下拉菜单中执行“显示-隐藏元素”命令，弹出“显示-隐藏元素”对话框如图8-17所示。
图8-17 “显示-隐藏元素”对话框
在“显示-隐藏元素”对话框中单击“显示”按钮后，单击“确定”按钮。返回文档窗口。
单击事件下拉列表按钮，从弹出的事件列表菜单中选择OnMouseOver。
为图像添加第二个“显示-隐藏元素”行为，将元素隐藏，这时事件选为OnMouseOut。
这只是应用AP元素的显示与隐藏属性的一个例子。其实利用AP元素的这个属性可以制作很多特殊的效果，如当用户单击某个按钮时显示一个交互表单，单击另一个按钮时隐藏这个交互表单。利用这个属性也可以制作下拉菜单，当用户把光标移动到某个项目上时或在某个项目上单击鼠标，就会显示一个下拉菜单，当用户把光标移走时，显示的下拉菜单会被隐藏起来。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
