3.4 图形显示类型控件
视频讲解
3.4.1 Image控件
1. Image控件概述
Image控件用于在页面上显示图像。在使用Image控件时，可以在设计或运行时以编程方式为Image对象指定图形文件。如图3.37所示为Image控件。
Image控件的常用属性及说明如表3.23所示。
图3.37 Image控件
表3.23 Image控件的常用属性及说明
下面介绍Image控件的ImageAlign属性和ImageUrl属性。
- ☑ ImageAlign属性
ImageAlign属性指定或确定图像相对于网页上其他元素的对齐方式。在表3.24中列出了可能的对齐方式。
表3.24 Image控件的ImageAlign属性的对齐方式
- ☑ ImageUrl属性
ImageUrl属性用于设置在Image控件中显示图像的位置（URL）。在设置ImageUrl属性值时，可以使用相对URL，也可以使用绝对URL。相对URL使图像的位置与网页的位置相关联，当整个站点移动到服务器上的其他目录时，不需要修改ImageUrl属性值；而绝对URL使图像的位置与服务器上的完整路径相关联，当更改站点路径时，需要修改ImageUrl属性值。笔者建议，在设置Image控件的ImageUrl属性值时，使用相对URL。
2. 实现动态显示用户头像功能
【例3.15】实现动态显示用户头像功能。（示例位置：mr\TM\03\15）
下面的示例主要是通过改变Image控件的ImageUrl属性值来动态显示用户头像。执行程序，并在下拉列表框中选择“boy头像”选项，示例运行结果如图3.38所示。在下拉列表框中选择“girl头像”选项，示例运行结果如图3.39所示。
图3.38 “boy头像”显示
图3.39 “girl头像”显示
程序实现的主要步骤如下。
新建一个网站，默认主页为Default.aspx，在Default.aspx页面上添加一个DropDownList控件和一个Image控件，其属性设置及其用途如表3.25所示。
表3.25 Default.aspx页面中控件属性设置及其用途
可以在DropDownList控件的SelectedIndexChanged事件下编写如下代码，实现动态显示用户头像：
说明
在使用Image控件时，一般情况下要设置其AlternateText属性（在图像无法显示时显示的替换文字）；设置此属性后，浏览网页时，当鼠标放置在控件上也会显示说明文字。
3.4.2 ImageMap控件
1. ImageMap控件概述
ImageMap控件允许在图片中定义一些热点（HotSpot）区域。当用户单击这些热点区域时，将会引发超链接或者单击事件。当需要对某幅图片的局部实现交互时，使用ImageMap控件，如以图片形式展示网站地图和流程图等。如图3.40所示为ImageMap控件。
图3.40 ImageMap控件
（1）ImageMap控件的常用属性
ImageMap控件的常用属性及说明如表3.26所示。
表3.26 ImageMap控件的常用属性及说明
ImageMap控件比较重要的两个属性是HotSpotMode属性和HotSpots属性。下面分别进行介绍。
- ☑ HotSpotMode属性
HotSpotMode属性用于获取或者设置单击热点区域后的默认行为方式。在表3.27中列出了HotSpotMode属性的枚举值。
表3.27 ImageMap控件的HotSpotMode属性的枚举值
注意
HotSpotMode属性虽然为图片中所有热点区域定义了单击事件的默认行为方式，然而，在某些情况下图片中热点区域的行为方式各不相同，需要单独为每个热点区域定义HotSpotMode属性及其相关属性。
- ☑ HotSpots属性
HotSpots属性用于获取HotSpots对象集合。HotSpot类是一个抽象类，它包含CircleHotSpot（圆形热区）、RectangleHotSpot（方形热区）和PolygonHotSpot（多边形热区）3个子类，这些子类的实例称为HotSpot对象。创建HotSpot对象的步骤如下。
①在ImageMap控件上右击，在弹出的快捷菜单中选择“属性”命令，弹出属性面板。
②在属性面板中，单击HotSpots属性后的
按钮，将弹出“HotSpot集合编辑器”对话框，如图3.41所示。单击“添加”按钮后的
按钮，将弹出一个下拉菜单，其中包括CircleHotSpot（圆形热区）、RectangleHotSpot（方形热区）和PolygonHotSpot（多边形热区）3个对象，可以通过单击添加对象。
图3.41 HotSpot集合编辑器
③为热点（HotSpot）区域设置属性。
在定义每个热点区域的过程中，主要设置两个属性。一个是HotSpotMode及其相关属性。HotSpot对象中的HotSpotMode属性用于为单个热点区域设置单击后的显示方式，与ImageMap控件的HotSpotMode属性基本相同。例如，当将HotSpotMode属性值设置为PostBack时，则必须设置定义回传值的PostBackValue属性；另一个是热点区域坐标属性。对于CircleHotSpot（圆形热区），需要设置半径Radius和圆心坐标X和Y，对于RectangleHotSpot（方形热区），需要设置其左、上、右、下的坐标，即Left、Top、Right、Bottom属性，对于PolygonHotSpot（多边形热区），需要设置每一个关键点的坐标Coordinates属性。
④单击“确定”按钮，创建完成。
（2）ImageMap控件的常用事件
ImageMap控件的常用事件是Click事件，该事件在用户单击热点区域时发生。当将HotSpotMode属性设置为PostBack时，需要定义并实现该事件的处理程序。
2. 使用ImageMap控件展示图片中的方位
【例3.16】使用ImageMap控件展示图片中的方位。（示例位置：mr\TM\03\16）
下面的示例主要是使用ImageMap控件展示图片中的方位。执行程序，示例运行结果如图3.42所示，在图片中单击西北方向，在界面中，将显示“您现在所指的方向是：西北方向。”字样，如图3.43所示。
图3.42 示例运行结果
图3.43 指向“西北方向”
程序实现的主要步骤如下。
（1）新建一个网站，默认主页为Default.aspx，在Default.aspx页面上添加一个ImageMap控件，其属性设置如表3.28所示。
表3.28 ImageMap控件属性设置
（2）定义3个RectangleHotSpot（方形热区），并为每个热点区设置相关的属性。
在属性面板中，单击HotSpots属性后的
按钮，弹出“HotSpot集合编辑器”对话框，在其中单击“添加”按钮后的
按钮，在弹出的下拉菜单中单击4个RectangleHotSpot（方形热区）项，并设置其左（Left）、上（Top）、右（Right）和下（Bottom）的坐标值，4个热点区的属性设置如下。
- ☑ 显示“西北”方向的RectangleHotSpot（方形热区）的属性设置
将Bottom设置为100，将Right设置为100，将HotSpotMode设置为PostBack，将PostBackValue设置为NW，将AlternateText设置为“西北”。
- ☑ 显示“东北”方向的RectangleHotSpot（方形热区）的属性设置
将Bottom设置为100，将Left设置为100，将Right设置为100，将HotSpotMode设置为PostBack，将PostBackValue设置为NE，将AlternateText设置为“东北”。
- ☑ 显示“西南”方向的RectangleHotSpot（方形热区）的属性设置
将Bottom设置为200，将Right设置为100，将Top设置为100，将HotSpotMode设置为PostBack，将PostBackValue设置为SW，将AlternateText设置为“西南”。
- ☑ 显示“东南”方向的RectangleHotSpot（方形热区）的属性设置
将Bottom设置为200，将Left设置为100，将Right设置为200，将Top设置为100，将HotSpotMode设置为PostBack，将PostBackValue设置为SE，将AlternateText设置为“东南”。
注意
对于ImageMap控件的属性设置，也可以通过在HTML视图中添加如下代码来实现。
（3）为了实现在单击图片中的热点区域时，将图片的方位显示出来，需要在ImageMap控件的Click事件下添加如下代码：
