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時用到。
對imagemap控件有了以上一個基本了解后，接著看asp.net quickstart提供個兩個應用示例和最后一個自定義菱形熱區示例就會有所體會了。
示例一：imagemap 多種hotspotmode 示例
<%@ page language="c#" %>
<!doctype html public "-//w3c//dtd xhtml 1.1//en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>untitled page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3><font face="verdana">imagemap 多種 hotspotmode 示例</font></h3>
<asp:imagemap id="buttons" imageurl="hotspot.jpg" alternatetext="navigate buttons"
runat="server">
<asp:rectanglehotspot
hotspotmode="navigate"
navigateurl="navigate1.htm"
alternatetext="button 1"
top="30"
left="175"
bottom="110"
right="355">
</asp:rectanglehotspot>
<asp:rectanglehotspot
hotspotmode="navigate"
navigateurl="navigate2.htm"
alternatetext="button 2"
top="155"
left="175"
bottom="240"
right="355">
</asp:rectanglehotspot>
<asp:rectanglehotspot
hotspotmode="navigate"
navigateurl="navigate3.htm"
alternatetext="button 3"
top="285"
left="175"
bottom="365"
right="355">
</asp:rectanglehotspot>
</asp:imagemap>
</div>
</form>
</body>
</html>
示例二：imagemap postback 模型示例
<%@ page language="c#" %>
<!doctype html public "-//w3c//dtd xhtml 1.1//en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<script runat="server">
void buttons_clicked(object sender, imagemapeventargs e)
{
label1.text = e.postbackvalue + " clicked!";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>untitled page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>
<font face="verdana">imagemap postback 模型示例</font></h3>
<asp:imagemap id="buttons" imageurl="hotspot.jpg" alternatetext="navigate buttons"
hotspotmode="postback" runat="server">
<asp:rectanglehotspot
hotspotmode="postback"
postbackvalue="button1"
alternatetext="button 1"
top="30"
left="175"
bottom="110"
right="355">
</asp:rectanglehotspot>
<asp:rectanglehotspot
hotspotmode="postback"
postbackvalue="button2"
alternatetext="button 2"
top="155"
left="175"
bottom="240"
right="355">
</asp:rectanglehotspot>
<asp:rectanglehotspot
hotspotmode="postback"
postbackvalue="button3"
alternatetext="button 3"
top="285"
left="175"
bottom="365"
right="355">
</asp:rectanglehotspot>
<asp:rectanglehotspot
hotspotmode="postback"
postbackvalue="background"
alternatetext="background"
top="0"
left="0"
bottom="390"
right="540">
</asp:rectanglehotspot>
</asp:imagemap>
<p>
<h3>
<font face="verdana">
<asp:label id="label1" runat="server"></asp:label>
</font>
</h3>
</p>
</div>
</form>
</body>
</html>
示例三：自定義熱點區域 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>
[總結]：在大部分web應用中可能很少會用到imagemap，但正因為有了imagemap，才讓web應用更加多姿多彩。有了imagemap，我們可以動態的在一張圖片中的某個局部范圍內進行相應的處理請求的夢想再也不遙遠。
商業源碼熱門下載www.html.org.cn
