层的显示与藏.docVIP

层的显示与隐藏 观察下面这个网页的特点，当鼠标点到地图某个景点的时候，就会自动显示一幅和景点相关的照片，这里就用到了层的显示。 设计与制作： 在photoshop打开本节资源包中的地图图像文件xhsj.png，依次对8个景点分别做切片。如下图： 执行菜单文件中的导出命令，在对话框中确认保存类型为HTML和图像，勾选将图像放入子文件夹选项，设置文件名为xhsj.htm，保存在本节资源包文件夹中。 在Dreamweaver中打开刚生成的网页xhsj.htm进行编辑，选择网页布局的整个表格，使表格居中对齐。 制作“断桥残雪”景点图层，在地名的左边找一合适的单元格，选中单元格中的图片，再按键盘的方向键（向左），出现光标插入点即可。 执行菜单插入中的布局对象里AP DIV层的命令，插入一个层。 利用层面板来选择层，执行菜单窗口中层命令，打开层面板，选中Layer1，则选中了刚建立的层。 在层的属性面板中，将层的编号设为dqcx，根据断桥残雪图片的大小将图层宽设置为240px，高设置为158px。 设置断桥残雪热点区域。点击地图上断桥残雪四个字所在的单元格，从其图像面板中选择矩形热点工具，在图像上设置热点区域，链接设为#。 执行菜单窗口中的行为命令，打开行为面板。 在保证断桥残雪所在热区被选中的情况下，点击行为面板中的“+”按钮，出现下拉菜单。选择“显示---隐藏层”菜单项。 在弹出的“显示---隐藏层”对话框中，选中这个层，并点击显示，然后点击“确定”。 这时“行为”面板中，onMouseOver表示“鼠标经过”，其动作是刚才设置的显示层。 再次选择“行为”面板中“显示---隐藏层”菜单，选择层。点击隐藏按钮。然后点击确定。 如上图，行为面板中点击第二个onMouseOver，在下拉列表中选择onMouseOut,表示鼠标移开。这样当鼠标移开图片就不会显示。 参照代码视图中.检查代码正确与否 map name=Map area shape=rect coords=2,3,53,30 href=# onMouseOver=MM_showHideLayers(dqcx,,show) onMouseOut=MM_showHideLayers(dqcx,,hide) /map 注解: show表显示 hide表隐藏 制作完成，保存并浏览观察制作效果。 用同样的方法制作柳浪闻鹭，设定热点区域。 在热点区域的左边插入一个层。 在层里插入柳浪闻鹭的图片，如下图。 打开窗口中层命令，可以看到两个层。新建立的层名称为：layer2。 选定柳浪闻鹭的热点区域，在行为命令中选择“显示---隐藏层”。 在弹出的窗口中选择layer2这个层，选择显示按钮，然后确定。 在保证选定热点区域的情况下，为其再添加一个行为，选定layer2，点击隐藏，然后确定。 在行为窗口中将显示层设为：onMouseOver。将隐藏层设为：onMouseOut。 把其他景点制作完毕,再保存浏览网页，观察制作效果。