4.4 定义图像热点

图像热点也称为图像地图，即指定图像内部某个区域为热点，当单击该热点区域时，会触发超链接，并跳转到其他网页或网页的某个位置。图像地图是一种特殊的超链接形式，常用来在图像中设置局部区域导航。

当在一幅图上定义多个热点区域，以实现单击不同的热区链接到不同页面时，就可以使用图像地图。

【操作步骤】

第1步，启动Dreamweaver CC，新建文档，保存为index.html。

第2步，在编辑窗口中插入图像，然后选中图像，打开【属性】面板，并单击【属性】面板右下角的展开箭头，显示图像地图制作工具，如图4.23所示。

第3步，在【属性】面板的【地图】文本框中输入热点区域名称。如果一个网页的图像中有多个热点区域，必须为每个图像热点区域起一个唯一的名称。

第4步，选择一个工具，根据不同部位的形状可以选择不同的热区工具，这里单击【矩形热点工具】按钮，在选定的图像上拖动鼠标指针，便可创建出图像热区。

第5步，热点区域创建完成后，选中热区，可以在【属性】面板中设置热点属性。

（1）【链接】文本框：可输入一个被链接的文件名或页面，单击【选择文件】按钮可选择一个文件名或页面。如果在【链接】文本框中输入“#”，表示空链接。

（2）【目标】下拉列表框：要使被链接的文档显示在其他地方而不是在当前窗口或框架，可在【目标】下拉列表框中输入窗口名或从中选择一个框架名。

（3）【替换】文本框：在该文本框中输入所定义热区的提示文字。在浏览器中当鼠标移到该热点区域中将显示提示文字。可设置不同部位的热区显示不同的文本。

第6步，用【矩形热点工具】创建一个热区，在【替换】文本框中输入提示文字，并设置好链接和目标窗口，如图4.24所示。

第7步，以相同的方法分别为各个部位创建热区，并输入不同的链接和提示文字。

第8步，切换到【代码】视图，可以看到自动生成的HTML代码：

其中，<map>标记表示图像地图，name属性作为<img>标记中usermap属性要引用的对象。然后用<area>标记确定热点区域，shape属性设置形状类型，coords属性设置热点区域各个顶点坐标，href属性表示链接地址，target属性表示目标，alt属性表示替代提示文字。

第9步，保存并预览，这时单击不同的热区就会跳转到对应的页面中。

【拓展】

对于图像地图创建的热区，用户可以很容易地进行修改，如移动热区、调整热区大小、在层之间移动热区，还可以将热区从一个页面复制到另一个页面等。

使用【指针热点工具】可以方便地选择一个热区。如果选择多个热区，只需要按住Shift键，单击要选择的其他热区，就可以实现选择多个热区的目的。

使用【指针热点工具】选择要移动的热区，拖动鼠标至合适位置即可移动热区。或者使用键盘操作，按下1次键盘上的箭头键，热区将向选定的方向移动1px，如果按下Shift+箭头键，热区将向选定的方向移动10px。

首先用【指针热点工具】选择要调整大小的热区，然后拖动【热点选择器手柄】到合适的位置，即可改变热区的大小或形状。