首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> .NET 網頁程式設計 >> ASP.NET 基礎 >> 關於ASP.NET

ASP.NET 2.0 圖形控件:Image 與 ImageMap 詳解

     編輯:關於ASP.NET

1. Image 控件

對應 <img />,基本屬性:

屬性說明
ImageUrl圖片路徑
AlternateText圖片無法顯示時的替代文字
DescriptionUrl詳細說明頁面連結(無障礙用)
GenerateEmptyAlternateText強制輸出空 alt=""
ImageAlign相對周圍文字對齊:AbsBottom, AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, Top

2. ImageMap 控件

同樣顯示圖片,但支援定義熱點區域,點擊不同區域觸發不同動作。

熱點類型

  • RectangleHotSpot:矩形區域(Left, Top, Right, Bottom)
  • CircleHotSpot:圓形區域(X, Y, Radius)
  • PolygonHotSpot:多邊形區域(Coordinates)

完整範例:導航列圖片

<asp:ImageMap ID="mapMenu" ImageUrl="MenuBar.gif" 
    HotSpotMode="PostBack" Runat="server" OnClick="mapMenu_Click">
    <asp:RectangleHotSpot PostBackValue="ToUpper" Left="0" Top="0" Right="100" Bottom="30" AlternateText="轉大寫" />
    <asp:RectangleHotSpot PostBackValue="ToLower" Left="100" Top="0" Right="200" Bottom="30" AlternateText="轉小寫" />
    <asp:RectangleHotSpot PostBackValue="Erase" Left="200" Top="0" Right="300" Bottom="30" AlternateText="清除" />
</asp:ImageMap>

後端處理

protected void mapMenu_Click(object sender, ImageMapEventArgs e)
{
    switch (e.PostBackValue)
    {
        case "ToUpper": txtInput.Text = txtInput.Text.ToUpper(); break;
        case "ToLower": txtInput.Text = txtInput.Text.ToLower(); break;
        case "Erase": txtInput.Text = ""; break;
    }
}

HotSpotMode 選項

  • PostBack:回傳表單,觸發 OnClick 事件,可取得 PostBackValue。
  • Navigate:直接導航至 NavigateUrl。
  • Inactive:無動作,僅顯示。

ImageMap 適合製作圖形化導航、互動式圖表、座位選擇等場景。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved