ASP.NET 中ImageMap控件的用法

更新時間：2016年04月22日 09:06:37 作者：頭發(fā)亂了

本文主要介紹ImageMap控件的使用方法，并做了簡單的代碼演示，希望能幫到大家。

利用 ASP.NET ImageMap 控件可以創(chuàng)建一個圖像，使其包含許多可由用戶單擊的區(qū)域（熱區(qū)），這些區(qū)域稱為“作用點”。每一個作用點都可以是一個單獨的超鏈接或回發(fā)事件。

常用屬性：

HotSpotMode屬性

HotSpotMode屬性用于獲取或設置單擊熱點區(qū)域后的默認行為方式。
ImageMap控件的HotSpotMode屬性的枚舉值如下表所示：

枚舉值	說明
Inactive	無任何操作，即此時就像一張沒有熱點區(qū)域的普通圖片
NotSet	未設置項，同時也是默認項。雖然名為未設置，但是默認情況下將執(zhí)行定向操作，即鏈接到指定的URL地址。如果未指定URL地址，則默認鏈接到應用程序根目錄下
Navigate	定向操作項。鏈接到指定的URL地址。如果未指定URL地址，則默認鏈接到應用程序根目錄下
PostBack	回傳操作項。單擊熱點區(qū)域后，將觸發(fā)控件的Click事件

注意：HotSpotMode屬性雖然為圖片中所有熱點區(qū)域定義了單擊事件的默認行為方式，但在某些情況下，由于圖片中熱點區(qū)域的行為方式各不相同，所以還需要單獨為每個熱點區(qū)域定義HotSpotMode屬性及其相關屬性。

HotSpots屬性

HotSpots屬性用于獲取HotSpots對象集合。
ImageMap控件由HotSpot類的實例組成。一個HotSpot定義圖像映射中的一個可點擊區(qū)域。ASP.NET Framework帶有3種HotSpot類。

    CircleHotSpot：用于在圖像映射中定義一個圓形區(qū)域。
    RectangleHotSpot：用于在圖像映射中定義一個矩形區(qū)域。
    PolygonHotSpot：用于在圖像映射中定義一個不規(guī)則形狀區(qū)域。

CircleHotSpot、RectangleHotSpot和PolygonHotSpot這3個子類的實例稱為HotSpot對象。

示例代碼：

Default.aspx

復制代碼代碼如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head runat="server">
    <title>示例8-4</title>
    <link id="InstanceStyle" href="StyleSheet.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <form id="Form1" runat="server">
        <div>
            <fieldset style="width: 290px">
                <legend class="mainTitle">ImageMap控件典型應用</legend>
                <br />
                <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Image/pic1.png" OnClick="ImageMap1_Click">
                    <asp:RectangleHotSpot AlternateText="模塊" Bottom="175" Left="77" NavigateUrl="http://localhost/"
                        Right="150" Target="_blank" Top="119" />
                    <asp:CircleHotSpot AlternateText="處理1" HotSpotMode="PostBack" PostBackValue="Pro1"
                        Radius="39" X="241" Y="50" />
                    <asp:CircleHotSpot AlternateText="處理2" HotSpotMode="PostBack" PostBackValue="Pro2"
                        Radius="39" X="241" Y="285" />
                    <asp:PolygonHotSpot AlternateText="引擎" Coordinates="366,118,325,160,372,206,411,161"
                        HotSpotMode="Inactive" />
                </asp:ImageMap>
                <br />
                <asp:Label ID="LabMessage" runat="server"></asp:Label>
            </fieldset>
        </div>
    </form>
</body>
</html>

Default.aspx.cs

復制代碼代碼如下:

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    protected void ImageMap1_Click(object sender, ImageMapEventArgs e)

    {

        String region = "";

        switch (e.PostBackValue)

        {

            case "Pro1":

                region = "處理1";

                break;

            case "Pro2":

                region = "處理2";

                break;

        }

        LabMessage.Text = "您單擊的是<b>" + region + "</b>.";

    }

}