ASP.NET学习系列（八）开始控件之旅之Image和ImageMap
Image控件功能有限，只是用于显示图片，如果图片无法显示时就用替代文本显示。它没有与
用户交互的引发事件。
Image的主要属性有：
AlternateText属性，用于在图片无效时替代文本。
ImageAlign：相对于网页文本对齐选项，共包括NotSet、AbsBottom、AbsMiddle、Top、
Bottom、BaseLine、Middle、TextTop、Left、Right等值。如果要对图片和文字位置做更多控
制，就要用CSS来定位了。
ImageUrl：可以是相对地址也可以是绝对地址。
ImageMap：定义热点区域，可以当做一个到达另一区域或网站的超链接。ImageMap属性继承自
Image，并添加了许多属性和一个Click事件，使该类有了图像映射的功能。
属性：
HotSpotMode：指定热点被点击时所采取的动作，Navigate表示立即链接到
NavigateUrlProperty指定的Url上，PostBack表示会产生一个服务器回发操作。
HotSpots：ImageMap控件中包含的所有热点对象的集合。
有三种类型的热点区域：
RectangleHotSpot：定义一个图片的矩形区域，包括有Top、Bottom、Left和Right属性，表示
相对于图片的左上角以像素为单位取值。
CircleHotSpot：包括指定圆心的X、Y属性，以及一个指定半径的Radius属性，都是以像素为
单位。
PolygonHotSpot：定义了一个多边形区域，由该区域轮廓线段端点的X、Y坐标组成的列表，端
点坐标间以逗号隔开。
HotSpot属性：
AlternateText:图片无效时显示。
HotSpotMode：
NavigateUrl：指定该热点的Url地址。
PostBackValue：被点击对象的值，由事件参数ImageMapEventArgs传递。
Target：指定浏览器要目标页显示在哪种类型的窗口中。有以下几个值：
_blank：将内容显示在一个无框架的新建的未命名窗口中;
_new:未列入标准文档，类似_blank;
_parent:将内容显示在父级窗口或框架中或者显示在该链接指向的框架页中。
_self:在当前框架或窗口中显示内容。
_top:在当前没有框架的整个窗口中显示页面内容。
示例：
代码
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<hr />
<asp:ImageMap ID="ImageMap1" runat="server"
HotSpotMode="PostBack" ImageUrl="~/Image/yesnomaybe.gif"
OnClick="firstImage_Click">
<asp:RectangleHotSpot Bottom="60" Top="21" Left="17" Right="103"
PostBackValue="Yes" AlternateText="Yes" />
<asp:RectangleHotSpot Bottom="60" Top="21" Left="122" Right="208"
PostBackValue="No" AlternateText="No" />
<asp:RectangleHotSpot Bottom="122" Top="83" Left="17" Right="103"
PostBackValue="Maybe" AlternateText="Maybe" />
<asp:CircleHotSpot HotSpotMode="Navigate" X="165" Y="106"
Radius="25" NavigateUrl="http://www.baidu.com" Target="_blank"
AlternateText="百度一下" />
</asp:ImageMap>
<br />
<asp:ImageMap ID="ImageMap2" runat="server"
ImageUrl="~/Image/plot.gif" HotSpotMode="PostBack"
OnClick="firstImage_Click" >
<asp:PolygonHotSpot Coordinates="4,245,4,3,495,3,495,45"
AlternateText="polygon" PostBackValue="polygon" />
</asp:ImageMap>
</div>
</form>
</body>
</html>
代码
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class imageAndImageMap_ImageMapDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void firstImage_Click(object sender, ImageMapEventArgs e)
{
Label1.Text = "The PostBackValue is" + e.PostBackValue;
}
}
