创建图像映射

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

除了在Adobe Dynamic Media Classic中创建图像映射的功能外,在Adobe Acrobat或Adobe InDesign中设计目录时,您还可以创建图像映射。

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

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

绘制和调整图像映射

  1. 执行以下任一操作:

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

    图像映射图像

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

    • 矩形映射 — 选择“矩形图像映射”工具并在页面上拖动以创建矩形。要向矩形映射添加点(从而将其更改为多边形映射),请按Ctrl,然后将插入工具放置到所需位置并选择。

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

  3. 如果需要,在“图像映射”列表中为图像映射输入名称。绘制图像映射后,AdobeDynamic Media Classic会为其分配一个名称。

    要创建名称,AdobeDynamic Media Classic会在您正在处理的图像或eCatalog页面的名称中附加一个顺序编号。 您可以输入您选择的名称。

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

    请参见输入 JavaScript 和 URL

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

  6. 如果您希望在用户将鼠标移动到图像映射上时发生其他操作效果,请定义该操作。在​Show​下拉列表中,选择​其他操作。 输入操作的属性。(转到​Show > Both​以创建滚动更新文本和图像映射的操作。)

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

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

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

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

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

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

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

小贴士

您可以拖动屏幕底部的“大小”滑块以更改视图,使您更轻松地查看图像映射。

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

  • 多边形图像映射 — 拖动方形选择手柄。要创建选择手柄,请选择图像映射的边框并开始拖动。

处理重叠图像映射

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

导入图像映射数据

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

导入图像映射数据:

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

复制图像映射

您可以将图像映射从一个图像或 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的专有AdobeDynamic Media Classic JavaScript处理程序,该处理程序会在新窗口中打开图像。

注意

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

关于 URL 模板

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

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

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

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

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

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

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

    注意

    处理程序 loadProductPW 不支持 DHTML 和 HTML5 查看器。

创建URL模板

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

处理URL模板

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

  • URL模板选项 — 选择URL模板选项,以将URL模板应用于图像或eCatalog页面上的所有图像映射。

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

为图像映射定义其他操作

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

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

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

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

定义图像映射的其他操作:

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

如果希望图像映射具有滚动文本和操作,请选择​Show​菜单,然后选择​Both

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

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

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

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

在 Adobe InDesign 中创建图像映射

  1. 在InDesign中,转到​Windows® > Interactive > Hyperlinks

  2. 在“超链接”面板中,选择要制作到图像映射中的文本、框架或图形。

  3. 从面板菜单中选择​新建超链接

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

  5. 在URL框中键入或粘贴产品ID。

  6. 选择​确定。 (AdobeDynamic Media Classic使用图像映射URL模板来完成URL。)

    注意

    您无需在Adobe InDesign中设置外观选项。 您可以在AdobeDynamic Media Classic中指定外观。

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

  8. 将文件导出为 PDF。

  9. 将PDF上传到AdobeDynamic Media Classic。

  10. 在​PDF选项​中,选择​提取链接

在 Adobe Acrobat 中创建图像映射

  1. 在Acrobat中,转到​工具 > 高级编辑 > 链接工具
  2. 拖动以创建图像映射。
  3. 在创建链接框中,选择​自定义链接,然后选择​下一步
注意

您无需在Adobe Acrobat中设置外观选项。 您可以在AdobeDynamic Media Classic中指定外观。

  1. 在“链接属性”框中,选择​操作
  2. 从“选择操作”菜单中选择​打开Web链接,然后选择​添加
  3. 在“编辑URL”框中键入图像映射的产品ID,然后选择​OK。 (AdobeDynamic Media Classic使用图像映射URL模板来完成URL。)
  4. 对于您想要创建的所有图像映射,重复步骤 1 到 7。
  5. 保存文件。
  6. 将PDF上传到AdobeDynamic Media Classic,然后从PDF选项中选择提取链接。

在此页面上