ImageMap 控制項

  • 發行項

ASP.NET 的 ImageMap 控制項可讓您建立具有個別區域供使用者點選的影像，該區域稱為作用點 (Hot Spot)。每一個作用點皆可以是個別的超連結或回傳事件。

新增 ImageMap 控制項至網頁

  1. 將 ImageMap 控制項從 [工具箱] 工作窗格拖曳至網頁。

  2. 設定屬性決定 [ImageMap] 在 [標籤屬性] 工作窗格中的外觀與行為。

如需所有 [ImageMap] 控制項屬性的完整說明，請參閱 MSDN Library 的 ImageMap 屬性。

ImageMap 元素

ImageMap 控制項主要由兩個項目組成。一是影像；其可以是任何標準 Web 圖形格式的圖形，如 .gif、.jpg 或 .png 檔案。

一是作用點控制項的集合。每一個作用點控制項均是不同的元素。您可以定義每個作用點控制項的圖案 (圓形、矩形或多角形)，以及指定作用點位置與大小的座標。例如，您若是建立圓形作用點，即可定義圓形中心的 x 與 y 座標及圓形的半徑。

您可以視需要為影像定義所需數量的作用點。但您無需定義作用點涵蓋整個圖形。

Cc295596.alert_note(zh-tw,Expression.10).gif注意事項：

您可以定義重疊的作用點。每一個作用點皆具有 Z 軸索引值；當使用者點選的區域是由兩個以上重疊的作用點所定義時，則具有圖層順序最高的作用點，即所選取的作用點。

定義 ImageMap 控制項的作用點

  1. 在 [設計] 檢視中，以滑鼠右鍵按一下 ImageMap 控制項，再按快顯功能表上的 [屬性]。

  2. 按一下作用點屬性旁的省略符號 Cc295596.0b8d1f68-5b69-4cd1-b928-5f7bc2a6c4dc(zh-tw,Expression.10).gif 按鈕，開啟 [作用點集合編輯器] 對話方塊。

  3. 按一下 [新增] 按鈕右側的箭號，然後按所要新增的作用點類型，包括 [CircleHotSpot]、[RectangleHotSpot] 或 [PolygonHotSpot]。

  4. 在 [屬性] 區域中，設定作用點的屬性。

繪製作用點圖形

您無法直接繪置 ASP.NET 之 [ImageMap] 控制項作用點的圖形，也可利用 Microsoft® Expression® Web 的作用點工具，在圖形上設定作用點的版面配置，並將這些座標剪貼至 [作用點集合編輯器] 對話方塊中作為屬性。

在 ImageMap 控制項中使用所繪製的座標圖形

  1. 將影像拖曳至 [設計] 檢視中的網頁。

  2. 若未開啟 [圖片] 工具列，請按一下 [檢視] 功能表中的 [工具列]，再按 [圖片] 加以開啟。

  3. 按一下 [多角形作用區] 按鈕、[圓形作用區] 按鈕或 [矩形作用區] 按鈕，在影像中繪製作用點。如需詳細資訊，請參閱新增或修改作用區。

  4. 在 [程式碼] 檢視中，複製作用點的座標。

  5. 以滑鼠右鍵按一下 ImageMap 控制項，再按 [屬性]。

  6. 按一下作用點屬性旁的省略符號按鈕，開啟 [作用點集合編輯器] 對話方塊。

  7. 在 [成員] 區域中選取您的作用點。

  8. 將座標值貼至 [屬性] 區域的適當屬性位置上。

例如，若是在影像中繪製圓形及三角形作用點，將會在 [程式碼] 檢視中顯示類似於下的項目：

影像的作用點範例

<area href="page.htm" shape="circle" coords="177,197,84" <area href="page.htm" shape="polygon" coords="392,113,466,252,310,252" />

您可以複製圓形的座標，將其套用至 CircleHotSpot 的屬性。第一個數字 177 指定了 X 屬性。第二個數字 197 指定了 Y 屬性，而第三個數字 84 則指定了半徑屬性。

同樣地，您也可以直接將多角形的座標複製到 PolygonHotSpot 的座標屬性：392,113,466,252,310,252。

描述

您可以指定當使用者點選 ImageMap 控制項上之作用點時所應執行的動作。每一個作用點皆可以設定成連至作用點所用之 URL 的超連結。此外也可以設定控制項，於使用者點選作用點時執行回傳，提供每一個作用點唯一的值。回傳會引發 ImageMap 控制項的 Click 事件。事件處理常式中會顯示指定至給各作用點的唯一值。如需有關如何回應使用者在 ImageMap 控制項中之按鍵動作的詳細資訊，請參閱 MSDN Library 的 How To：回應使用者在 ImageMap Web 伺服器控制項中的按鍵。