3.4 图形显示类型控件

3.4.1 Image控件

1.Image控件概述

Image控件用于在页面上显示图像。在使用Image控件时，可以在设计或运行时以编程方式为Image对象指定图形文件。如图3.37所示为Image控件。

图3.37 Image控件

Image控件的常用属性及说明如表3.23所示。

表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】 实现动态显示用户头像功能。（示例位置：TM\sl\03\15）

本示例主要是通过改变Image控件的ImageUrl属性值来动态显示用户头像。执行程序，并在下拉列表框中选择“boy图像”选项，示例运行结果如图3.38所示。在下拉列表框中选择“girl图像”选项，示例运行结果如图3.39所示。

图3.38 “boy图像”显示

图3.39 “girl图像”显示

程序实现的主要步骤如下。

（1）新建一个网站，默认主页为Default.aspx，在Default.aspx页面上添加1个DropDownList控件和1个Image控件，其属性设置及用途如表3.25所示。

表3.25 Default.aspx页面中控件属性的设置及用途

（2）在DropDownList控件的SelectedIndexChanged事件下编写如下代码，实现动态显示用户头像。

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
            {
              //用户选择DropDownList控件中的不同项时，显示不同的用户头像
              if (DropDownList1.SelectedIndex == 1)
              {
                    Image1.ImageUrl = "~/images/boy.jpg";
              }
              else if (DropDownList1.SelectedIndex == 2)
              {
                  Image1.ImageUrl = "~/images/girl.jpg";
              }
              else
              {
                  Image1.ImageUrl = "";
              }
            }

说明

在使用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集合编辑器

③ 为热点区域设置属性。在定义每个热点区域的过程中，主要设置两个属性。一个是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控件展示图片中的方位。（示例位置：TM\sl\03\16）

本示例主要使用ImageMap控件展示图片中的方位。执行程序，示例运行结果如图3.42所示，在图片中单击西北方向，在界面中，将会显示“您现在所指的方向是：西北方向”字样，如图3.43所示。

图3.42 示例运行结果

图3.43 指向“西北方向”

程序实现的主要步骤如下。

（1）新建一个网站，默认主页为Default.aspx，在Default.aspx页面上添加1个ImageMap控件，其属性设置如表3.28所示。

表3.28 ImageMap控件属性设置

（2）定义4个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视图中添加如下代码来实现。

        <asp:ImageMap ID="ImageMap1" ImageUrl="~/images/指南针．jpg " runat="server"
        OnClick="ImageMap1_Click" Borderwidth="1PH"
        HotSpotMode="PostBack">
        <asp:RectangleHotSpot Bottom="100" Right="100"
        HotSpotMode="PostBack" PostBackValue="NW" AlternateText="西北"  />
        <asp:RectangleHotSpot Bottom="100" Left="100" Right="200" AlternateText="东北"
        HotSpotMode="PostBack" PostBackValue="NE" />
        <asp:RectangleHotSpot Bottom="200" Right="100" Top="100" AlternateText="西南"
        PostBackValue="SW" HotSpotMode="PostBack" />
        <asp:RectangleHotSpot Bottom="200" Left="100" Right="200" AlternateText="东南"
        Top="100" PostBackValue="SE" HotSpotMode="PostBack" /> </asp:ImageMap>

（3）为了实现在单击图片中的热点区域时，将图片的方位显示出来，需要在ImageMap控件的Click事件下添加如下代码：

        protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
            {
              String region = "";
              switch (e.PostBackValue)
              {
                  case "NW":
                      region = "西北";
                      break;
                  case "NE":
                      region = "东北";
                      break;
                  case "SE":
                      region = "东南";
                      break;
                  case "SW":
                      region = "西南";
                      break;
              }
              Label1.Text="您现在所指的方向是： "+region+"方向。";
            }
上一章目录下一章