最近评论
正在载入评论列表...
2.4 显示图像
ASP.NET Framework包含两个用于显示图像的控件：Image控件和ImageMap控件。Image控件用于简单的显示图像。ImageMap控件用于创建客户端的、可点击的图像映射。
2.4.1 使用Image控件
代码清单2-26中的页面随机显示三幅图像中的一幅。该图像通过设置页面主体中的Image控件的ImageUrl属性来显示。
代码清单2-26 ShowImage.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
void Page_Load()
{
Random rnd = new Random();
switch (rnd.Next(3))
{
case 0:
imgRandom.ImageUrl = "Picture1.gif";
imgRandom.AlternateText = "Picture 1";
break;
case 1:
imgRandom.ImageUrl = "Picture2.gif";
imgRandom.AlternateText = "Picture 2";
break;
case 2:
imgRandom.ImageUrl = "Picture3.gif";
imgRandom.AlternateText = "Picture 3";
break;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Show Image</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image
id="imgRandom"
Runat="server" />
</div>
</form>
</body>
</html>
Image控件支持下列属性（不完全列表）：
q AlternateText——为图像提供替代文本（辅助功能要求）。
q DescriptionUrl——用于提供指向包含该图像详细描述的页面的链接（复杂的图像要求可访问）。
q GenerateEmptyAlternateText——为AlternateText属性设空字符串值。
q ImageAlign——用于将图像和页面中其他HTML元素对齐。可能的值有AbsBottom、AbsMiddle、Baseline、Bottom、Left、Middle、NotSet、Right、TextTop和Top。
q ImageUrl——用于指定图片的URL。
Image控件有三种方法来提供代替文本。如果图片代表页面内容，就应该为AlternateText属性提供一个值。假如有一个你公司的logo图片，就应该把文本“公司logo”赋值给AlternateText属性。
如果Image控件表示的信息很复杂，比如柱状图、饼图或公司组织结构图，那么就应该为DescriptionUrl属性提供一个值。DescriptionUrl属性链接到一个包含对该图片的大篇文字描述的页面。
最后，如果图片纯粹是为了装饰（不表示内容），那么应该把GenerateEmptyAlternateText属性设为True。当这个属性设为True时，生成的<img>标签就会包含alt=""属性。读屏器知道忽略alt属性为空的图片。
2.4.2 使用ImageMap控件
ImageMap控件用于生成客户端的图像映射。一个图像映射显示一幅图片。点击图片的不同区域，激发事件。
比如，可以把图像映射当作一个奇特的导航条使用。这样，点击图像映射的不同区域，就会导航到网站的不同页面。
也可以把图像映射用作一种输入机制。比如，可以点击不同的产品图片来向购物车添加不同的产品。
ImageMap控件由HotSpot类的实例组成。一个HotSpot定义图像映射中的一个可点击区域。ASP.NET Framework带有三种HotSpot类：
q CircleHotSpot——用于在图像映射中定义一个圆形区域。
q PolygonHotSpot——用于在图像映射中定义一个不规则形状区域。
q RectangleHotSpot——用于在图像映射中定义一个矩形区域。
代码清单2-27中的页面包含一个用ImageMap控件创建的导航条。ImageMap控件包含三个RectangleHotSpot，用来定义导航条中显示的三个按钮的界限（见图2-16）。
图2-16 用ImageMap控件导航
代码清单2-27 ImageMapNavigate.aspx
<%@ Page Language="C#" %>
<!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 id="Head1" runat="server">
<title>ImageMap Navigate</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap
id="mapNavigate"
ImageUrl="ImageBar.jpg"
Runat="server">
<asp:RectangleHotSpot
NavigateUrl="Home.aspx"
Left="0"
Top="0"
Right="100"
Bottom="50"
AlternateText="Navigate to Home" />
<asp:RectangleHotSpot
NavigateUrl="Products.aspx"
Left="100"
Top="0"
Right="200"
Bottom="50"
AlternateText="Navigate to Products" />
<asp:RectangleHotSpot
NavigateUrl="Services.aspx"
Left="200"
Top="0"
Right="300"
Bottom="50"
AlternateText="Navigate to Services" />
</asp:ImageMap>
</div>
</form>
</body>
</html>
每个RectangleHotSpot都包含用来描述矩形区域的Left、Top、Right和Bottom属性。每个RectangleHotSpot也包含一个NavigateUrl属性，该属性含有该图像映射链接区域的URL。
除了能用图像映射链接到不同的页面，也能用它来回传到同一页面。例如，代码清单2-28中的页面使用一个ImageMap控件来显示一个菜单。点击由不同的图像映射区域表示的不同菜单项，可改变TextBox控件中的文本（见图2-17）。
图2-17 用ImageMap控件回传到服务器端
代码清单2-28 ImageMapPostBack.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void mapMenu_Click(object sender, ImageMapEventArgs e)
{
switch (e.PostBackValue)
{
case "ToUpper":
txtText.Text = txtText.Text.ToUpper();
break;
case "ToLower":
txtText.Text = txtText.Text.ToLower();
break;
case "Erase":
txtText.Text = String.Empty;
break;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ImageMap PostBack</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap
id="mapMenu"
ImageUrl="MenuBar.gif"
HotSpotMode="PostBack"
Runat="server" OnClick="mapMenu_Click">
<asp:RectangleHotSpot
PostBackValue="ToUpper"
Left="0"
Top="0"
Right="100"
Bottom="30"
AlternateText="To Uppercase" />
<asp:RectangleHotSpot
PostBackValue="ToLower"
Left="100"
Top="0"
Right="200"
Bottom="30"
AlternateText="To Uppercase" />
<asp:RectangleHotSpot
PostBackValue="Erase"
Left="200"
Top="0"
Right="300"
Bottom="30"
AlternateText="To Uppercase" />
</asp:ImageMap>
<br />
<asp:TextBox
id="txtText"
TextMode="MultiLine"
Columns="40"
Rows="5"
Runat="server" />
</div>
</form>
</body>
</html>
注意，ImageMap控件的HotSpotMode属性的值设成了PostBack。同时，ImageMap控件关联了称作mapMenu_Click的Click事件处理程序。
ImageMap控件中的每一个HotSpot都有一个PostBackValue属性。mapMenu_Click处理程序从被点击的区域读取PostBackValue并修改TextBox控件显示的文本。
ImageMap控件支持下列属性（不完全列表）：
q AccessKey——用于指定导向ImageMap控件的键。
q AlternateText——为图像提供替代文本（辅助功能要求）。
q DescriptionUrl——用于提供指向一个页面的链接，该页面包含对该图像的详细描述（复杂的图像要求能被理解）。
q GenerateEmptyAlternateText——为AlternateText属性设空字符串值。
q HotSpotMode——指定点击区域时图像映射的行为。可能的值有Inactive、Navigate、NotSet和PostBack。
q HotSpots——用于获取ImageMap控件包含的HotSpots集合。
q ImageAlign——用于和页面中其他HTML元素对齐。可能的值有AbsBottom、AbsMiddle、 Baseline、Bottom、Left、Middle、NotSet、Right、TextTop和Top。
q ImageUrl——用于指定图像的URL。
q TabIndex——设置ImageMap控件的Tab顺序。
q Target——用于在新窗口中打开页面。
ImageMap控件支持下面的方法：
q Focus()—— 用于把表单初始焦点设为该ImageMap控件。
最后，ImageMap控件还支持下面的事件：
q Click——点击ImageMap控件中的区域并且HotSpotMode的值设为PostBack时引发。
图书导读
