ImageMap控件可以在Web頁(yè)面上創(chuàng)建一個(gè)圖像，該圖像可以包含許多可由用戶單擊的區(qū)域，這些區(qū)域稱為“熱點(diǎn)（HotSpot）”。每一個(gè)熱點(diǎn)都可以是一個(gè)單獨(dú)的超鏈接或者回發(fā)（PostBack）事件。用戶可以通過(guò)單擊這些熱點(diǎn)區(qū)域進(jìn)行回發(fā)操作或者定向（Navigate）到某個(gè)URL地址?？梢愿鶕?jù)需要為圖像定義任意數(shù)量的熱點(diǎn)，但不需要定義足以覆蓋整個(gè)圖形的熱點(diǎn)。因此，該控件一般用在需要對(duì)某張圖片的局部范圍進(jìn)行互動(dòng)操作時(shí)。

在日常編程中，主要使用它的HotSpotMode、HotSpots屬性和Onick事件。

1) HotSpotMode屬性。顧名思義，HotSpotMode為熱點(diǎn)模式，它對(duì)應(yīng)枚舉類型System.Web.UI.WebControls.HotSpotMode。其選項(xiàng)及說(shuō)明如表3-4所示。

表3-4   HotSpotMode屬性的選項(xiàng)說(shuō)明

2) HotSpots屬性。該屬性對(duì)應(yīng)著System.Web.UI.WebControls.HotSpot對(duì)象集合。HotSpot類是一個(gè)抽象類，它有CircleHotSpot（圓形熱區(qū)）、RectangleHotSpot（矩形熱區(qū)）和PolygonHotSpot（多邊形熱區(qū)）這三個(gè)子類。實(shí)際應(yīng)用中，都可以使用上面三種類型來(lái)定制圖片的熱點(diǎn)區(qū)域。如果需要使用到自定義的熱點(diǎn)區(qū)域類型，該類型必須繼承HotSpot抽象類。

3) Onclick事件。對(duì)熱點(diǎn)區(qū)域的點(diǎn)擊事件經(jīng)常在HotSpotMode為PostBack時(shí)用到。

現(xiàn)在先來(lái)看下面的一個(gè)示例程序。該示例用到了HotSpotMode，并將一個(gè)圖片分成3個(gè)矩形熱點(diǎn)區(qū)域（RectangleHotSpot），當(dāng)單擊每個(gè)矩形熱點(diǎn)區(qū)域時(shí)，就會(huì)連接到另外一個(gè)Web站點(diǎn)。其中，Top、Left、Bottom和Right代表RectangleHotSpot的四個(gè)坐標(biāo)點(diǎn)，以此來(lái)形成一個(gè)矩形熱點(diǎn)區(qū)域，如代碼清單3-1所示。

代碼清單3-1   TestImageMap1.aspx

<form id="form1" runat="server"> 
<div> 
   <asp:ImageMap ID="imageMap1" ImageUrl="Images/1.jpg" 
   AlternateText="ImageMap控件示例" Runat="Server"> 
     <asp:RectangleHotSpot HotSpotMode="Navigate" 
     NavigateUrl="http://www." 
     AlternateText="區(qū)域一，連接到www." 
     Top="0" Left="0" Bottom="35" Right="90"> 
     asp:RectangleHotSpot> 
     <asp:RectangleHotSpot HotSpotMode="Navigate" 
     NavigateUrl="http://www.google.cn" 
     AlternateText="區(qū)域二，連接到www.google.cn" 
     Top="0" Left="90" Bottom="35" Right="180"> 
     asp:RectangleHotSpot> 
     <asp:RectangleHotSpot HotSpotMode="Navigate" 
     NavigateUrl="http://www.baidu.com" 
     AlternateText="區(qū)域三，連接到www.baidu.com" 
     Top="35" Left="0" Bottom="70" Right="180"> 
     asp:RectangleHotSpot> 
   asp:ImageMap> 
div> 
form> 

運(yùn)行上面的程序，結(jié)果如圖3-1所示。在該運(yùn)行結(jié)果中，當(dāng)把鼠標(biāo)放到某個(gè)矩形熱點(diǎn)區(qū)域時(shí)就能夠出現(xiàn)相應(yīng)的信息提示。比如把鼠標(biāo)放在熱點(diǎn)區(qū)域二中，會(huì)出現(xiàn)“區(qū)域二，連接到www.google.cn”的提示信息，單擊該熱點(diǎn)區(qū)域，就會(huì)連接到www.google.cn網(wǎng)站。

由上面的示例可以看出，ImageMap控件實(shí)際是由兩個(gè)部分組成：

第一個(gè)部分是圖像，它可以是任何標(biāo)準(zhǔn) Web 圖形格式的圖形，例如 .gif、.jpg 或 .png 文件。

第二個(gè)部分是一個(gè)熱點(diǎn)控件集。每個(gè)熱點(diǎn)控件都是一個(gè)不同的元素。對(duì)于每個(gè)熱點(diǎn)控件，都需要定義其形狀[CircleHotSpot（圓形熱區(qū)）、RectangleHotSpot（矩形熱區(qū)）和PolygonHotSpot（多邊形熱區(qū)）]，還要定義用于指定熱點(diǎn)位置和大小的坐標(biāo)。例如，如果創(chuàng)建了一個(gè)矩形熱點(diǎn)區(qū)域，則應(yīng)定義它的四個(gè)坐標(biāo)點(diǎn)位置。

在代碼清單3-1中，為每個(gè)矩形熱點(diǎn)配置了一個(gè)超鏈接，通過(guò)該超鏈接可以轉(zhuǎn)到為該矩形熱點(diǎn)提供的 URL地址。當(dāng)然，還可以將該控件配置為在用戶單擊某個(gè)熱點(diǎn)時(shí)執(zhí)行回發(fā)，為每個(gè)熱點(diǎn)提供一個(gè)唯一值?；匕l(fā)會(huì)引發(fā)ImageMap控件的OnClick事件。在事件處理程序中，可以讀取分配給每個(gè)熱點(diǎn)的唯一值。來(lái)看下面的示例，如代碼清單3-2所示。

代碼清單3-2   TestImageMap2.aspx

<form id="form1" runat="server"> 
<div> 
   <asp:ImageMap id="imageMap2" ImageUrl="Images/1.jpg" 
   AlternateText="ImageMap控件示例" HotSpotMode="PostBack" 
   Runat="Server" onclick="imageMap2_Click"> 
         <asp:RectangleHotSpot HotSpotMode="PostBack" 
          PostBackValue="http://www." 
          AlternateText="區(qū)域一，連接到www." 
          Top="0" Left="0" Bottom="35" Right="90"> 
         asp:RectangleHotSpot> 
       <asp:RectangleHotSpot HotSpotMode="PostBack" 
        PostBackValue="http://www.google.cn" 
        AlternateText="區(qū)域二，連接到www.google.cn" 
        Top="0" Left="90" Bottom="35" Right="180"> 
       asp:RectangleHotSpot> 
       <asp:RectangleHotSpot HotSpotMode="PostBack" 
        PostBackValue="http://www.baidu.com" 
        AlternateText="區(qū)域三，連接到www.baidu.com" 
        Top="35" Left="0" Bottom="70" Right="180"> 
       asp:RectangleHotSpot> 
    asp:ImageMap> 
    <br /> 
    <asp:Label ID="label1" runat="server">asp:Label> 
div> 
form> 

如代碼清單3-2所示，它使用了PostBack回發(fā)模式，并在ImageMap控件里添加了一個(gè)OnClick事件imageMap2_Click。imageMap2_Click事件處理代碼如下：

protected void imageMap2_Click(object sender, ImageMapEventArgs e)  
{  
    label1.Text = e.PostBackValue  
    + " clicked!";  
} 

運(yùn)行上面的程序，結(jié)果如圖3-2所示。在該運(yùn)行結(jié)果中，當(dāng)把鼠標(biāo)放到某個(gè)矩形熱點(diǎn)區(qū)域時(shí)就能夠出現(xiàn)相應(yīng)的信息提示。單擊該熱點(diǎn)區(qū)域時(shí)，就會(huì)觸發(fā)imageMap2_Click事件，在頁(yè)面輸出被單擊區(qū)域的PostBackValue值。