4.3 案例实战：定义图像热点
视频讲解
图像热点也称为图像地图，即指定图像内部某个区域为热点，当单击该热点区域时，会触发超链接，并跳转到其他网页或网页的某个位置。图像地图是一种特殊的超链接形式，常用来在图像中设置局部区域导航。当在一幅图上定义多个热点区域，以实现单击不同的热区链接到不同页面，这时就可以使用图像地图。
【操作步骤】
第1步，启动Dreamweaver CC，新建文档，保存为index.html。
第2步，在编辑窗口中插入图像，然后选中图像，打开属性面板，并单击属性面板右下角的展开箭头
，显示图像地图制作工具，如图4.11所示。
图4.11 图像属性面板
提示：在图像属性面板中用【指针热点工具】
、【矩形热点工具】
、【椭圆热点工具】
和【多边形热点工具】
可以调整和创建热点区域，简单说明如下。
☑ 【指针热点工具】按钮：调整和移动热点区域。
☑ 【椭圆热点工具】按钮：在选定图像上拖动鼠标指针可以创建圆形热区。
☑ 【矩形热点工具】按钮：在选定图像上拖动鼠标指针可以创建矩形热区。
☑ 【多边形热点工具】按钮：在选定图像上，单击选择一个多边形，定义一个不规则形状的热区。单击【指针热点工具】按钮可以结束多边形热区定义。
第3步，在属性面板的【地图】文本框中输入热点区域名称。如果一个网页的图像中有多个热点区域，必须为每个图像热点区域起一个唯一的名称。
第4步，选择一个工具，根据不同部位的形状可以选择不同的热点工具，这里选择【矩形热点工具】按钮，在选定的图像上拖动鼠标指针，便可创建出图像热区。
第5步，热点区域创建完成后，选中热区，可以在属性面板中设置热点属性。
☑ 【链接】文本框：可输入一个被链接的文件名或页面，单击【选择文件】按钮可选择一个文件名或页面。如果在【链接】文本框中输入#，表示空链接。
☑ 【目标】下拉列表：要使被链接的文档显示在其他地方而不是在当前窗口或框架，可在【目标】下拉列表中输入窗口名或选择一个框架名。
☑ 【替换】文本框：在该文本框中输入所定义热区的提示文字。在浏览器中当鼠标移到该热点区域中将显示提示文字。可设置不同部位的热区显示不同的文本。
第6步，用【矩形热点工具】创建一个热区，在【替换】下拉列表中输入提示文字，并设置好链接和目标窗口，如图4.12所示。
图4.12 热点属性面板
第7步，以相同的方法分别为各个部位创建热区，并输入不同的链接和提示文字。
第8步，切换到【代码】视图，可以看到自动生成以下的HTML代码：
其中，<map>标记表示图像地图，name属性作为<img>标记中usermap属性要引用的对象。然后用<area>标记确定热点区域，shape属性设置形状类型，coords属性设置热点区域各个顶点坐标，href属性表示链接地址，target属性表示目标，alt属性表示替代提示文字。
第9步，保存并预览，这时单击不同的热区就会跳转到对应的页面中。