備註
Dynamics 365 Commerce 的零售興趣群組已從 Yammer 移至 Viva Engage。 如果您無法存取新的Viva Engage社群，請填寫此表單 （https://aka.ms/JoinD365commerceVivaEngageCommunity） 以新增，並繼續參與最新的討論。
本文說明了主動影像模組，以及如何將它們加入 Microsoft Dynamics 365 Commerce 的網站頁面。
使用主動式影像模組將產品標籤嵌入圖片中。 然後，電子商務網站使用者可以將滑鼠游標懸停在標籤上以預覽圖像中顯示的產品。 預覽會以彈出視窗顯示。 當使用者選擇預覽彈出視窗時，可以直接前往對應產品的產品詳情頁面（PDP）。
在圖片上使用 X 和 Y 座標來定義標籤。 將每個標記點設定為該標籤在圖片中所代表的產品 ID。
下圖顯示 Adventure Works 首頁上一個英雄圖像上的預覽版彈出式視窗範例。
重要
- 主動映像模組自 Dynamics 365 Commerce 10.0.20 版本起提供。
- 主動影像模組出現在 Adventure Works 主題中。
互動圖像模組屬性
| 屬性名稱 | 值 | 描述 |
|---|---|---|
| 影像 | 影像檔案 | 圖像可用來展示一或多件產品。 可以將圖像上傳到 Commerce 網站建立器中的媒體庫，也可以使用現有圖像。 |
| 寬度 | 像素數 | 此屬性會定義圖像的寬度。 顯示中座標是根據圖像的寬度計算。 |
| 顯示中座標 | X 和 Y 座標以及產品識別碼編號 | 每個互動圖像陣列都由 X 和 Y 座標以及產品識別碼編號組成。 |
| 標題 | 標題文字和標題標籤 ( H1、H2、 H3、 H4、 H5，或 H6) | 根據預設，H2 標題標籤用於標題，但可以變更標籤以滿足協助工具需求。 |
| 段落 | 段落文字 | 模組支援富文字格式的段落文字。 支援一些基本的富文字功能，例如超連結以及粗體、底線和斜體文字。 套用到模組的頁面主題可以覆寫其中一些功能。 |
| 連結 | 連結文字、連結 URL、可存取的多樣化網際網路應用程式 (ARIA) 標籤，和在新索引標籤中開啟連結選擇器 | 模組支援一或多個「行動呼籲」連結。 如果新增連結，則需要連結文字、URL 和 ARIA 標籤。 ARIA 標籤應具有描述性，以滿足可存取性需求。 連結可以設定成會在新分頁開啟。 |
| 下標文字 | 標題、文字和連結 | 可以新增圖像的其他上下文，例如作者或設計者名稱，或連接至個人部落格的連結。 |
| 文字主題 | 淺色或深色 | 此屬性讓使用者可以根據背景圖像，將文字設定為淺色或深色。 它可作為 Adventure Works 主題中的主題擴充。 |
將互動圖像模組新增到新頁面
要將主動影像模組加入新頁面並設定所需屬性，請依照以下步驟操作：
- 移至範本，然後打開網站首頁的行銷範本 (或建立新的行銷範本)。
- 在預設頁面的主要插槽中，選取省略符號 (...)，然後選取新增模組。
- 在選取模組對話方塊中，選取互動圖像模組，然後選取確定。
- 選取儲存，選取完成編輯以簽入範本，然後選取發佈以進行發佈。
- 移至頁面，然後打開網站的首頁 (或使用行銷範本建立新的首頁)。
- 在預設頁面的主要插槽中，，選取省略符號按鈕 (...)，然後選取新增模組。
- 在選取模組對話方塊中，選取互動圖像模組，然後選取確定。
- 在活動圖像模組的屬性窗格中，新增圖像，並將畫布寬度設定為圖像的大小。
- 設定 X 和 Y 座標，並新增適當的產品識別碼編號。
- 根據需要新增和設定其他互動圖像模組。
- 選取儲存，然後選取預覽版以預覽頁面。
- 選取完成編輯以簽入範本，然後選取發佈進行發佈。