了解如何在 Dreamweaver 中使用图像地图为您的网站创建交互式热点。
图像地图 指已被分为多个区域(称为热点)的图像;当用户单击某个热点时,会发生某种动作(例如,打开一个新文件)。
客户端图像地图将超文本链接信息存储在 HTML 文档中,而不是像服务器端图像地图那样,存储在单独的地图文件中。 当站点访问者单击图像中的热点时,相关 URL 被直接发送到服务器。 这样使得客户端图像地图比服务器端图像地图要快,因为服务器不必解释访问者的单击位置。
Dreamweaver 并不改变现有文档中对服务器端图像地图的引用;在同一文档中,可以同时使用客户端图像地图和服务器端图像地图。 不过,同时支持这两种图像地图类型的浏览器赋予客户端图像地图以优先权。 若要在文档中包含服务器端图像地图,必须编写相应的 HTML 代码。
要在 Dreamweaver 中使用热点,您必须在设计视图中进行。
插入客户端图像地图
在插入客户端图像地图时,请创建一个热点区域,然后定义用户单击此热点区域时所打开的链接。
可以创建多个热点区域,但它们是同一图像地图的一部分。
在“地图”字段中,为该图像地图输入一个唯一的名称。 如果在同一文档中使用多个图像地图,要确保每个地图都有唯一名称。
选择圆形工具
,并将鼠标指针拖至图像上,创建一个圆形热点。 选择矩形工具
,并将鼠标指针拖至图像上,创建一个矩形热点。选择多边形工具
,在各个顶点上单击一下,定义一个不规则形状的热点。 单击箭头工具以封闭此形状。创建热点后,将显示热点属性检查器。
在“链接”字段中,单击文件夹图标以浏览到并选择在用户单击该热点时要打开的文件,或者键入其路径。
在“目标”下拉列表中,选择应在其中打开该文件的窗口或键入其名称。
当前文档中所有已命名框架的名称都显示在此弹出列表中。 如果指定的框架不存在,所链接的页面会加载到一个新窗口,该窗口包含您指定的名称。 也可选用下列保留目标名:
- _blank 将链接的文件加载到一个未命名的新浏览器窗口中。
- _parent 将链接的文件加载到含有该链接的框架的父框架集或父窗口中。 如果包含链接的框架不是嵌套的,则链接文件加载到整个浏览器窗口中。
- _self 将链接的文件加载到该链接所在的同一框架或窗口中。 此目标是默认的,所以通常不需要指定它。
- _top 将链接的文件加载到整个浏览器窗口中,因而会删除所有框架。
- _new 将链接文件加载到一个新的浏览器窗口。
只有当所选热点包含链接后,目标选项才可用。
修改图像地图热点
可以轻松编辑在图像地图中创建的热点。 可以移动热点区域,调整热点大小,或者在绝对定位的元素(AP 元素)中前后移动热点。
还可以将含有热点的图像从一个文档复制到另一个文档,或者复制某哥图像中的一个或多个热点,然后将其粘贴到另一个图像上;这样就将与该图像关联的热点也复制到了新文档中。
选择图像地图中的多个热点
在按下 Shift 键的同时单击要选择的其他热点。
按 Ctrl+A(在 Windows 中)或者按 Command+A(在 Macintosh 中),选择所有热点。
移动热点
将此热点拖动到新区域。
使用 Ctrl + 箭头键将热点向选定方向一次移动 10 个像素。
使用箭头键将热点向选定方向一次移动 1 个像素。