创建图像映射

图像映射是图像、eCatalog 页面上的区域或旋转集中的图像,显示含文本的变换面板。当用户单击图像映射时,将触发某种操作。例如,将启动网页,供用户了解产品的更多相关信息。为了使用户注意到图像映射,当用户将指针移到图像映射上时,其四周会显示轮廓。

除了在Dynamic Media经典中创建图像地图的功能,或者在Adobe Acrobat或Adobe InDesign设计目录时,也可以创建图像地图。

创建图像映射时,您可以执行以下任何操作:

  • 输入变换文本。
  • 输入用于启动网页的 JavaScript 和 URL。
  • 为图像映射创建 URL 模板。
  • 将图像映射复制到其他图像、eCatalog 页面或旋转集。
  • 把图像映射导出到 CSV 或 XML。
  • 从制表符分隔文件或 XML 文件导入图像元数据。
  • 定义万维网联盟所确定的其他操作。
  • 预览图像映射。

绘制和调整图像映射

  1. 执行以下任一操作:

    • 如果您正在“网格视图”或“列表”视图中处理图像,请在“编辑”下拉列表中单击​图像映射。 或者,在详细视图中打开它,然后单击图像上方的​图像映射
    • 如果您正在“网格”视图或“列表”视图中处理旋转集,请单击​编辑。 或者,在“详细信息”视图下打开它,然后单击​编辑。 选择图像资产,然后单击​图像映射
    • 如果您正在使用eCatalog,请在“网格”视图、“列表”视图、“详细信息”视图中,单击“编辑”。 单击​映射页面​选项卡。

  2. 绘制矩形或多边形(多条边)图像映射:

    形映射选择矩形图像映射工具并在页面上拖动以创建矩形。要向矩形映射中添加点(从而将其更改为多边形映射),请按住 Ctrl 键,接下来在所需位置放置插入工具,然后单击。

    多边 形映射选择“多边形图像映射”工具,并单击要包围的图像区域周长上的点。使用多边形密度滑块改变多边形中的点密度。如果选择其他映射,将记住原始密度。如果在多边形中添加、删除或移动任何点,将丢失原始密度,同时滑块重置为其最大值。

  3. 如果需要,在“图像映射”列表中为图像映射输入名称。在您绘制图像映射后,Dynamic Media经典会为其指定一个名称。

    要创建名称,Dynamic Media经典会将一个连续编号附加到您正在处理的图像或电子目录页面的名称中。 您可以输入您选择的名称。

  4. 如果希望用户在单击图像映射时打开新的网页,请在“图像映射”列表中输入 URL。

    请参见输入 JavaScript 和 URL

  5. 要在用户将指针移动到图像映射上时显示变换文本,请在“图像映射”列表中输入文本。在“图像映射”列表中,选择“显示”菜单,并选择“变换文本”。接下来输入您想要用户在屏幕上看到的文本。可以在文字处理程序中写入文本,然后将其复制到“变换文本”字段中。

  6. 如果您希望在用户将鼠标移动到图像映射上时发生其他操作效果,请定义该操作。在“显示”下拉列表中,单击“其他操作”。输入操作的属性。(单击“显示”>“两者全部”可为图像映射创建滚动文本和操作。)

    请参阅定义图像映射的其他操作

  7. (可选)请执行下列操作之一:

    • 单击“预览”来预览图像映射。
    • 要删除图像映射或多边形顶点,请选择图像上的形状,然后单击“删除”。或者,对于 eCatalog,在“排序页面”选项卡上,单击“清除映射”从所有页面中删除图像映射。
    • 要将某个图像映射临时从图像、旋转集中的图像或 eCatalog 页面中移走而不删除,请在“图像映射”列表中取消选中相应的“开”选项。
  8. 单击“保存”。

调整图像映射的位置、形状和大小

要更改图像映射的位置、形状和大小,请选择“图像映射”按钮 。然后,选择“平移”工具并按照以下说明操作:

改位置将指针移到图像映射的边框附近,但不移到边框上。当您看见四向箭头图标时,将映射拖到新位置。

更改大小和形 状更改图像映射的形状和大小的方式取决于您使用的是矩形还是多边形图像映射:

提示​:您可以拖动屏幕底部的“大小”滑块来更改视图,并更好地查看图像映射。

矩形图 像映射将指针移动到图像映射的一侧或一角。当您看见双向箭头图标时,开始拖动。拖动时,按住 Shift 键,以更改大小,但保持高宽比(形状)不变。

多边形图 像映射拖动方形选择手柄。要创建选择手柄,单击图像映射的边框,然后开始拖动。

处理重叠的图像映射

如果您的图像或 eCatalog 页面包括多个图像映射且映射重叠,您可以确定映射的重叠方式。为此,请更改“图像映射”列表上映射的顺序。将它们的名称拖到列表上的更高或更低位置。名称在列表中的高低位置决定其图像映射是否重叠其他图像映射。

导入图像映射数据

可以将图像、旋转集或 eCatalog 的数据导入到“映射摘要”屏幕中,而不必在每个页面上都输入图像映射数据。可以通过制表符分隔的文件或 XML DTD 的形式导入图像映射数据。文件中的字段必须与“映射摘要”屏幕中显示的顺序相同:“名称”、“TOC 标签”、“映射”、“URL”、“变换文本”、“其他操作”和“搜索字符串”。导入图像映射数据可以免去创建每个图像映射时在“图像映射”列表中输入数据的麻烦。

导入图像映射数据

  1. 转到“图像映射”编辑器页(对于图像或旋转集中的图像)或 eCatalog 编辑屏幕的“映射页面”选项卡。
  2. 单击“导入元数据”。
  3. 在“上载元数据”对话框中,单击“图像”或“图像映射”从所需的资源属性类型中上载元数据。
  4. 在“生成文件”下拉列表中,选择要创建的文件类型。
  5. (可选)单击“生成”来基于要创建的文件类型预览生成的数据。单击“关闭”以返回到“上载元数据”对话框。
  6. 浏览至您要上载的文件。在“文件名”文本字段中,指定所生成文件的名称。
  7. (可选)在“作业名称”字段中,指定元数据上载作业的名称。
  8. 单击“上载”。

复制图像映射

您可以将图像映射从一个图像或 eCatalog 页面复制到另一个。使用“复制图像映射”能够提高创建的速度。您还可以通过复制图像映射,在共用相同布局或映射结构的图像或页面中重新创建这些图像映射。

例如,在 eCatalog 中复制图像映射是一种在相同 eCatalog 的不同外语版本之间复制所有图像映射的简便方式。为获得最佳结果,如果您在具有相同数量的页面和相同图像的不同 eCatalog 之间复制,则复制是最成功的。如果图像映射所复制到的 eCatalog 已经包含图像映射,请注意复制时将删除原有的图像映射。

复制图像映射

  1. 转到“图像映射”编辑器页(对于图像或旋转集中的图像)或 eCatalog 编辑屏幕的“映射页面”选项卡。

  2. 单击“将映射复制到”。

  3. 根据您是从图像复制图像映射还是从 eCatalog 复制图像映射,执行下列操作之一:

    • (图像)在“选择图像”屏幕中,选择您要将图像映射复制到的图像。
    • (eCatalog) 在“选择资源”屏幕中,选择您要将图像映射复制到的图像或 eCatalog 页面。
  4. 单击“选择”。

使用模板输入 JavaScript 和 URL

您可以定义 URL 模板(也称为 Href 模板),以便在输入图像映射 URL 时更轻松更有效。如果您的大部分图像映射 URL 都共享通用的固定格式,请定义 URL 模板。在输入固定 URL 部分以作为 URL 模板后,每次创建图像映射时,无需输入该部分 URL。您的 URL 模板也可以包含 JavaScript 命令、路径名和参数。默认情况下,URL模板包含一个名为loadProduct的专有Dynamic Media经典JavaScript处理程序,它在新窗口中打开图像。

注意

请注意,在图像映射的 HREF 属性中添加 Javascript 代码时,将在客户端计算机上运行该代码。因此,请确保 Javascript 代码是安全的。

关于 URL 模板

URL 模板的工作方式是,在模板中使用两个美元符号 ('$$') 代替“图像映射”列表中 URL 列的内容:

Javascript:loadProduct(‘$$’);void(0);

请将在图像映射之间不会发生变化的所有值放在 URL 模板中。仅仅将那些会在 URL 列中发生变化的值添加到“图像映射”列表中。例如:

  • URL模板:j avascript:loadProduct(‘https://www.examplesitehere.com/$$’);void(0);
  • URL值:product.htm
  • 生成的实际URL:javascript:loadProduct(‘https://www.examplesitehere.com/product.html);void(0);

默认情况下,URL模板包含一个名为loadProduct的专有Dynamic Media经典JavaScript处理程序,该处理程序打开一个包含URL目标的新窗口。 但是,您可以使用任何JavaScript代码替换此JavaScript处理程序,或使用下列Dynamic Media经典处理程序之一:

  • loadProductCW

    在当前窗口中显示在 URL 列中指定的 URL 目标。该处理函数主要用于集成到网站中的页面的 eCatalog。

  • loadProductPW

    在父窗口(打开当前窗口的页面)中显示在 URL 列中指定的 URL 目标。当前窗口仍处于打开状态,但父窗口切换为显示 URL 目标。

    注​:该处理 loadProductPW 程序不支持DHTML和HTML5查看器。

创建 URL 模板

要创建 URL 模板,请执行以下操作:

  1. 在“映射编辑器”屏幕(图像或旋转集)或 eCatalog 屏幕 (eCatalog) 的“映射页面”选项卡上,选择“URL 模板”选项旁边的“编辑”。将打开“编辑映射模板”对话框。
  2. 输入JavaScript代码和完整的URL(变量部分替换为美元符号[$$])。 您可以通过右键单击并选择“粘贴”来粘贴代码。
  3. 选择“保存”按钮。

处理 URL 模板

“映射编辑器”页面(图像和旋转集)和 eCatalog 屏幕 (eCatalog) 的“映射页面”选项卡提供以下用于处理 URL 模板的命令:

URL模板 选项选择URL模板选项,可将URL模板应用于图像或电子目录页面上的所有图像映射。

模板 选项如果不希望单个图像映射使用URL模板,请在URL图像映射列表中取消选择模板选项。

定义图像映射的其他操作

您可以选择“显示”菜单,然后选择“其他操作”以触发除变换文本和网页启动之外的操作。当用户将指针移动到图像映射上时,您可以启动一个操作。这些操作是万维网联盟 HTML 规范为客户端图像映射定义的属性。它们是:

​accesskey当用户按下键盘上的指定键时触发操作。

onfocus 当图像映射收到焦点时触发事件-通过光标、Tab键或按访问键。例如,当图像映射被激活时,您可以启动网页,当图像映射被取消激活时,您可以将其关闭。

onblur 当图像映射失去焦点时(通过光标或Tab键)触发事件。

定义图像映射的其他操作

  1. 在“映射编辑器”屏幕(图像和旋转集)或 eCatalog 屏幕 (eCatalog) 的“映射页面”选项卡上,选择“显示”菜单,然后选择“其他操作”。
  2. 使用由万维网联盟 HTML 规范指定的语法,在“图像映射”列表的“其他操作”列中添加支持的属性。
  3. 单击“保存”。

选择“显示”菜单,然后选择“两者全部”(如果您希望图像映射同时具有变换文本和操作)。

在 Adobe Acrobat 或 Adobe InDesign 中创建图像映射

在 Adobe Acrobat 或 Adobe InDesign 中设计 eCatalog 时,您可以创建图像映射。

在 Acrobat 或 InDesign 中,创建您希望在其中出现图像映射的超链接引用,然后为图像映射指定 URL 位置。将PDF文件上传到Dynamic Media经典时,选择“提取链接”选项会自动将链接转换为图像映射。

有关更多信息,请参阅 InDesign 帮助或 Acrobat 帮助。

在 Adobe InDesign 中创建图像映射

  1. 在 InDesign 中,单击“窗口”>“交互”>“超链接”,打开“超链接”面板。

  2. 选择要创建图像映射的文本、帧或图形。

  3. 在“超链接”面板中,单击面板菜单中的“新建超链接”。

  4. 在“新建超链接”对话框中,从“链接到”菜单中选择 URL。

  5. 在 URL 框中键入或粘贴产品 ID,然后单击“确定”。(Dynamic Media经典使用图像映射URL模板完成URL。)

    注意

    您不需要在 InDesign 中设置外观选项。您可以在Dynamic Media经典中指定外观。

  6. 对于您想要创建的所有图像映射,重复步骤 2 到 5。

  7. 将文件导出为 PDF。

  8. 将PDF上传到Dynamic Media经典,然后从PDF选项中选择“提取链接”。

在 Adobe Acrobat 中创建图像映射

  1. 在 Acrobat 中,选择“工具”>“高级编辑”>“链接工具”。

  2. 拖动以创建图像映射。将打开“创建链接”框。

  3. 选择“自定义链接”,然后单击“下一步”。

    注​:您无需在Acrobat设置外观选项。可以在Dynamic Media经典中指定外观。

  4. 在“链接属性”框中,单击“动作”。

  5. 从“选择动作”菜单中选择“打开网络链接”,然后单击“添加”。

  6. 在“编辑 URL”框中键入图像映射的产品 ID,然后单击“确定”。(Dynamic Media经典使用图像映射URL模板完成URL。)

  7. 对于您想要创建的所有图像映射,重复步骤 1 到 7。

  8. 保存文件。

  9. 将PDF上传到Dynamic Media经典,然后从PDF选项中选择“提取链接”。

在此页面上