asp.net|控件
-
ImageMap控件是一個讓你可以在圖片上定義熱點（HotSpot）區域的服務器控件。用戶可以通過點擊這些熱點區域進行
回發（PostBack）操作或者定向（Navigate）到某個URL位址。該控件一般用在需要對某張圖片的局部範圍進行互動操
作時，其主要屬性有HotSpotMode、HotSpots和主要操作Click。
? HotSpotMode：顧名思義爲熱點模式，對應枚舉類型System.Web.UI.WebControls.HotSpotMode。其選項及說
明如下：
1) NotSet：未設置項。雖然名爲未設置，但其實默認情況下會執行定向操作，定向到你指定的URL位址去。如
果你未指定URL位址，那默認將定向到自己的Web應用程序根目錄。
2) Navigate：定向操作項。定向到指定的URL位址去。如果你未指定URL位址，那默認將定向到自己的Web應用
程序根目錄。
3) PostBack：回發操作項。點擊熱點區域後，將執行後部的Click事件。
4) Inactive：無任何操作，即此時形同一張沒有熱點區域的普通圖片。
? HotSpots：該屬性對應着System.Web.UI.WebControls.HotSpot對象集合。HotSpot類是一個抽象類，它之下
有CircleHotSpot（圓形熱區）、RectangleHotSpot（方形熱區）和PolygonHotSpot（多邊形熱區）三個子類。實際應
用中，都可以使用上面三種類型來定製圖片的熱點區域。如果需要使用到自定義的熱點區域類型時，該類型必須繼承
HotSpot抽象類。下面即有個自定義的菱形熱區DiamondHotSpot範例可以參考。
? Click：對熱點區域的點擊操作。通常在HotSpotMode爲PostBack時用到。
可以在頁面中添加javascript代碼：（獲取圖片座標的位置）
<script language ="javascript" type ="text/javascript" >
document.οnmοusemοve=function()
{
window.status ="X:"+window.event.x+" Y:"+window.event.y;
}
</script>
自定義熱點區域 DiamondHotSpot 菱形熱點區域
1. 創建DiamondHotSpot類
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;
namespace HotSpotTest
{
public class DiamondHotSpot : System.Web.UI.WebControls.HotSpot
{
public int CenterX
{
get
{
object val = ViewState["centerx"];
if (val == null)
return 0;
else
return (int)val;
}
set
{
ViewState["centerx"] = value;
}
}
public int CenterY
{
get
{
object val = ViewState["centery"];
if (val == null)
return 0;
else
return (int)val;
}
set
{
ViewState["centery"] = value;
}
}
public int Width
{
get
{
object val = ViewState["width"];
if (val == null)
return 0;
else
return (int)val;
}
set
{
ViewState["width"] = value;
}
}
public int Height
{
get
{
object val = ViewState["height"];
if (val == null)
return 0;
else
return (int)val;
}
set
{
ViewState["height"] = value;
}
}
protected override string MarkupName
{
get
{
return "poly";
}
}
public override string GetCoordinates()
{
return CenterX.ToString() + "," +
(CenterY - Height / 2).ToString() + "," +
(CenterX + Width / 2).ToString() + "," +
CenterY.ToString() + "," +
CenterX.ToString() + "," +
(CenterY + Height / 2).ToString() + "," +
(CenterX - Width / 2).ToString() + "," +
CenterY.ToString();
}
}
}
2. 在頁面寫 Register 指令
<%@ Register TagPrefix="HotSpotTest" Namespace="HotSpotTest" %>
3. 在後部代碼裏動態添加菱形熱區，或者直接在頁面代碼裏聲明菱形熱區
? 後部代碼動態添加：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
HotSpotTest.DiamondHotSpot dhs = new HotSpotTest.DiamondHotSpot();
dhs.CenterX = 100;
dhs.CenterY = 50;
dhs.Height = 100;
dhs.Width = 50;
ImageMap1.HotSpots.Add(dhs);
}
}
? 頁面代碼聲明：
<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="hotspot.jpg" HotSpotMode="PostBack">
<HotSpotTest:DiamondHotSpot CenterX="100" CenterY="50" Height="100" Width="50" />
</asp:ImageMap>