理论教育 DreamweaverCS6教程:图像映射的使用方法

DreamweaverCS6教程:图像映射的使用方法

时间:2023-10-29 理论教育 版权反馈
【摘要】:使用图像属性检查器可通过图形方式创建或编辑客户端图像映射。再在文档窗口中图像上的“食宿”两个字的左上角单击鼠标左键,加入一个定位点;再在左下角单击鼠标左键,加入第二个定位点,这时两个定位点间会连成一条直线。图5-14 实例效果图5-15 加入热点后的图像在属性设置面板中选择“指针热点工具”按钮,再用鼠标单击“景点”的热点区域,选中该热点区域。

DreamweaverCS6教程:图像映射的使用方法

图像映射是指将一幅图像分割为若干个区域,并将这些子区域设置成热点区域,然后将这些不同热点区域链接到不同的页面,当单击图像上的不同热点区域时,就可以跳转到不同的页面。使用图像属性检查器可通过图形方式创建或编辑客户端图像映射。下面通过一个实例来说明如何使用图像映射,最终的效果如图5-14所示。

978-7-111-40982-3-Chapter05-54.jpg新建一个文件。单击“插入”/“常用”面板中的图像978-7-111-40982-3-Chapter05-55.jpg按钮,在文档窗口中插入图像。

978-7-111-40982-3-Chapter05-56.jpg选中图像,单击属性面板上的选择“圆形热点工具”按钮978-7-111-40982-3-Chapter05-57.jpg,此时该图标会下凹,表示被选中。再在文档窗口中图像上的“景点”两字左上角按下鼠标左键,然后向右下角拖动鼠标,直到出现的圆形框将“景点”两个字包围后释放鼠标,第一个热点建立完成。此时热点区域会显示成半透明的阴影。

978-7-111-40982-3-Chapter05-58.jpg在属性设置面板上单击“矩形热点工具”按钮978-7-111-40982-3-Chapter05-59.jpg,此时该图标会下凹,表示被选中。再在文档窗口中图像上的“交通”两字的左上角按下鼠标左键,然后向右下角拖动鼠标,直到出现的矩形框将“交通”两个字包围后释放鼠标,第二个热点建立完成。此时热点区域会显示成半透明的阴影。

978-7-111-40982-3-Chapter05-60.jpg在属性设置面板上单击“多边形热点工具”按钮978-7-111-40982-3-Chapter05-61.jpg,此时该图标会下凹,表示被选中。再在文档窗口中图像上的“食宿”两个字的左上角单击鼠标左键,加入一个定位点;再在左下角单击鼠标左键,加入第二个定位点,这时两个定位点间会连成一条直线。按同样的方法在右上角、右下角各加入一个定位点,此时4个定位点会连成一个梯形,将“食宿”两个字包围,第三个热点建立完成。

978-7-111-40982-3-Chapter05-62.jpg如果要调整热点区域的大小,在属性设置面板中选择“指针热点工具”按钮978-7-111-40982-3-Chapter05-63.jpg,再用鼠标单击进行调整的热点区域,此时被选中的热点区域的四角会出现4个方块,表示该热点区域正被选中。把光标放在这些小方块上(会改变光标的颜色),然后拖拉鼠标即可改变热点区域的大小,设置好的效果如图5-15所示。

978-7-111-40982-3-Chapter05-64.jpg(www.daowen.com)

图5-14 实例效果

978-7-111-40982-3-Chapter05-65.jpg

图5-15 加入热点后的图像

978-7-111-40982-3-Chapter05-66.jpg在属性设置面板中选择“指针热点工具”按钮978-7-111-40982-3-Chapter05-67.jpg,再用鼠标单击“景点”的热点区域,选中该热点区域。单击属性设置面板“链接”选项后面打开文件的图标,打开文件选择框,从站点目录中选择一个文件后,单击“确定”按钮确认并关闭窗口,超级链接文件的路径及文件名显示在“链接”后面的文本框内。

978-7-111-40982-3-Chapter05-68.jpg通过同样的方法为其他两个热点区域建立超级链接。

978-7-111-40982-3-Chapter05-69.jpg执行“文件”|“保存”命令保存文档。按下快捷键F12在浏览器中预览整个页面,当鼠标移动到热点区域上时,鼠标的形状变为手形,并且在浏览器下方的状态栏中显示了链接的路径。单击各个热点区域,则会打开超级链接的文件,并显示相关的内容。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈