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:在当前没有框架的整个窗口中显示页面内容。
示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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;
}
}