如何将交互式热点包含在您的网站中

优质

小牛编辑

122浏览

2023-12-01

了解如何在 Dreamweaver 中使用图像地图为您的网站创建交互式热点。

图像地图指已被分为多个区域（称为热点）的图像；当用户单击某个热点时，会发生某种动作（例如，打开一个新文件）。

客户端图像地图将超文本链接信息存储在 HTML 文档中，而不是像服务器端图像地图那样，存储在单独的地图文件中。当站点访问者单击图像中的热点时，相关 URL 被直接发送到服务器。这样使得客户端图像地图比服务器端图像地图要快，因为服务器不必解释访问者的单击位置。

Dreamweaver 并不改变现有文档中对服务器端图像地图的引用；在同一文档中，可以同时使用客户端图像地图和服务器端图像地图。不过，同时支持这两种图像地图类型的浏览器赋予客户端图像地图以优先权。若要在文档中包含服务器端图像地图，必须编写相应的 HTML 代码。

插入客户端图像地图

在插入客户端图像地图时，请创建一个热点，然后定义用户单击此热点时所打开的链接。

注意:可以创建多个热点，但它们是同一图像地图的一部分。

在“文档”窗口中，选择图像。
在属性检查器中，单击右下角的展开箭头，查看所有属性。
在“地图”字段中，为该图像地图输入一个唯一的名称。如果在同一文档中使用多个图像地图，要确保每个地图都有唯一名称。
若要定义图像地图区域，请执行下列操作之一：
- 选择圆形工具，并将鼠标指针拖至图像上，创建一个圆形热点。
- 选择矩形工具，并将鼠标指针拖至图像上，创建一个矩形热点。
- 选择多边形工具，在各个顶点上单击一下以定义一个不规则形状的热点。然后单击箭头工具封闭此形状。
  创建热点后，出现热点属性检查器。
在“链接”字段中，单击文件夹图标以浏览到并选择在用户单击该热点时要打开的文件，或者键入其路径。
在“目标”下拉列表中，选择应在其中打开该文件的窗口或键入其名称。
当前文档中所有已命名框架的名称都显示在此弹出列表中。如果指定的框架不存在，所链接的页面会加载到一个新窗口，该窗口使用您所指定的名称。也可选用下列保留目标名：
- _blank 将链接的文件加载到一个未命名的新浏览器窗口中。
- _parent 将链接的文件加载到含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。
- _self 将链接的文件加载到该链接所在的同一框架或窗口中。此目标是默认的，所以通常不需要指定它。
- _top 将链接的文件加载到整个浏览器窗口中，因而会删除所有框架。
- _new 将链接文件加载到一个新的浏览器窗口。
注意:只有当所选热点包含链接后，目标选项才可用。
在“替换文本”框中，键入在纯文本浏览器或手动下载图像的浏览器中显示的替换文本。有些浏览器在用户将指针滑过热点时，将此文本显示为工具提示。
重复第 4 步到第 7 步，定义该图像地图中的其他热点。
完成绘制图像地图后，在文档中的空白区域单击以更改属性检查器。