ASP.NET 中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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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>
                    <legend>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>.";
        }
    }