Dreamweaver制作鼠标悬停图片切换效果教程

"这篇教程介绍了如何使用Dreamweaver来实现鼠标悬停在不同位置时显示不同图片的效果。通过创建和编辑APDiv、插入表格、添加按钮以及应用行为面板中的显示和隐藏元素功能，用户可以创建出一个交互式的图片切换效果。" 在Dreamweaver中制作这种效果的步骤如下： 1. 首先，你需要准备多张尺寸相同的图片，例如，你可以使用Photoshop将它们调整为相同的大小，便于在网页中整齐排列。 2. 打开Dreamweaver并创建一个新的HTML网页，然后保存。 3. 插入一个1行1列的表格作为基础布局。 4. 在表格内添加APDiv，这将作为图片容器。通过插入布局对象->APDiv，然后在APDiv中插入你需要的图片。 5. 重复步骤4，为每张图片创建一个APDiv，并将它们放在合适的位置。 6. 接下来，创建一个包含多个单元格的表格，用于放置按钮。按钮的数量应与图片数量相匹配。 7. 为每个单元格插入按钮，并在属性面板中分别设置它们的值，以便区分不同的图片。 8. 将这些按钮移动到对应图片的区域上方。 9. 打开行为面板（窗口->行为），这是实现交互效果的关键。 10. 对于每个按钮，选择“+”号，然后选择“显示-隐藏元素”。这样，当按钮获得焦点（被鼠标点击或悬停）时，可以控制相应图片的显示或隐藏。 11. 通过设置显示和隐藏的状态，你可以指定当某个按钮被选中时，哪个APDiv的图片会显示出来。 12. 例如，对于第一个按钮，设置它聚焦时显示APDiv1，隐藏APDiv2和APDiv3。其他按钮类似地进行配置。 13. 确保所有按钮的事件都设置正确，比如使用onFocus事件，使得当鼠标悬停在按钮上时，对应的图片就能显示出来。 通过这个教程，用户可以学习到如何利用Dreamweaver的布局工具和JavaScript行为来创建动态的交互式网页效果。这个技巧不仅可以应用于图片切换，还可以扩展到其他类型的交互元素，比如隐藏文本、弹出信息等。熟练掌握这些技能，对于提升网页设计和开发的能力非常有帮助。