ASP.NET使用ImageMap控件

admin · 发表于 2024-2-29 08:14:09

ASP.NET使用ImageMap控件

ImageMap控件允许在图片中定义一些热点（HotSpot）区域。当用户单击这些热点区域时，将会引发超链接或单击事件。

当需要对某张图片的局部实现交互时，可使用ImageMap控件。例如，以图片形式展示网站地图、流程图等。

也可以这样说：

ImageMap控件用于生成客户端的图像映射。一个图像映射显示一幅图片，点击图片的不同区域将激发事件。

比如，可以把图像映射当做一个奇特的导航条使用。这样，点击图像映射的不同区域，就会导航到网站的不同页面。

也可以把图像映射用作一种输入机制。比如，可以点击不同的产品图片来向购物车添加不同的产品。

ImageMap控件如下图所示：

ImageMap控件的属性

将工具箱中的ImageMap控件拖动到aspx页面中，或者在页面中选择一个ImageMap控件时，ImageMap控件的属性就显示在了“属性”窗口中。如下图所示：

在“属性”窗口中点击任意一个属性时，都会在窗口底部显示出对该属性的解释。

ImageMap控件中的主要属性如下：

HotSpotMode属性

HotSpotMode属性用于获取或设置单击热点区域后的默认行为方式。

ImageMap控件的HotSpotMode属性的枚举值如下表所示：

枚举值	说明
Inactive	无任何操作，即此时就像一张没有热点区域的普通图片
NotSet	未设置项，同时也是默认项。虽然名为未设置，但是默认情况下将执行定向操作，即链接到指定的URL地址。如果未指定URL地址，则默认链接到应用程序根目录下
Navigate	定向操作项。链接到指定的URL地址。如果未指定URL地址，则默认链接到应用程序根目录下
PostBack	回传操作项。单击热点区域后，将触发控件的Click事件

注意：HotSpotMode属性虽然为图片中所有热点区域定义了单击事件的默认行为方式，但在某些情况下，由于图片中热点区域的行为方式各不相同，所以还需要单独为每个热点区域定义HotSpotMode属性及其相关属性。

HotSpots属性

HotSpots属性用于获取HotSpots对象集合。

ImageMap控件由HotSpot类的实例组成。一个HotSpot定义图像映射中的一个可点击区域。ASP.NET Framework带有3种HotSpot类。

CircleHotSpot：用于在图像映射中定义一个圆形区域。
RectangleHotSpot：用于在图像映射中定义一个矩形区域。
PolygonHotSpot：用于在图像映射中定义一个不规则形状区域。

CircleHotSpot、RectangleHotSpot和PolygonHotSpot这3个子类的实例称为HotSpot对象。

创建HotSpot对象的步骤如下：

1. 在ImageMap控件上单击鼠标右键，在弹出的快捷菜单上选择“属性”命令，弹出“属性”窗口。

2. 在“属性”窗口中先选择HotSpots属性，再单击HotSpots属性右侧的

按钮。如下图所示：

3. 弹出“HotSpot 集合编辑器”对话框。如下图所示：

4. 在该对话框中，单击“添加”按钮右侧的向下箭头按钮，将会弹出一个下拉菜单。如下图所示：

该下拉菜单中包括CircleHotSpot（圆形热点区域）、RectangleHotSpot（方形热点区域）和PolygonHotSpot（多边形热点区域）等3个对象。

5. 单击要添加的对象，即可添加该对象。如下图所示：

6. 在“HotSpot 集合编辑器”对话框的右侧，为添加的热点区域（HotSpot）设置属性。

在定义每个热点区域的过程中，在“HotSpot 集合编辑器”对话框中主要设置两个属性：

一个是HotSpotMode及其相关属性。HotSpot对象中的HotSpotMode属性用于为单个热点区域设置单击后的显示方式，这与ImageMap控件的HotSpotMode属性基本相同。例如，当HotSpotMode属性值设置为PostBack时，则必须设置定义回转值的PostBackValue属性。

另一个是热点区域坐标属性。对于CircleHotSpot（圆形热点区域），需要设置半径Radius和圆心坐标X和Y；对于RectangleHotSpot（矩形热点区域），需要设置其左上右下的坐标，即Left、Top、Right、Bottom属性；对于PolygonHotSpot（多边形热点区域），需要设置每一个关键点坐标的Coordinates属性。

7. 属性值设置好以后，点击“确定”按钮，即可创建完成。

ImageMap控件支持的方法

Focus()方法

Focus()方法用于把表单初始焦点设置为该ImageMap控件。

ImageMap控件支持的事件

Click事件

点击ImageMap控件中的热点区域，并且HotSpotMode属性的值设置为PostBack时，则需要定义并实现该事件的处理程序。

实例

在ImageMapNavigate.aspx网页中包含一个用ImageMap控件创建的导航条。ImageMap控件包含3个RectangleHotSpot，用于定义导航条中显示的3个按钮的界限。程序代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageMapNavigate.aspx.cs" Inherits="ImageMapNavigate" %>
<!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>ASP.NET使用ImageMap控件-www.baike369.com</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap
ID="ImageMap1"
runat="server"
ImageUrl="~/images/pic4.gif">
<asp:RectangleHotSpot
AlternateText="跳转到企业介绍栏目"
NavigateUrl="1.aspx"
Left="0"
Top="0"
Right="140"
Bottom="53" />
<asp:RectangleHotSpot
AlternateText="跳转到产品中心栏目"
NavigateUrl="2.aspx"
Left="145"
Top="0"
Right="287"
Bottom="53" />
<asp:RectangleHotSpot
AlternateText="跳转到新闻中心栏目"
NavigateUrl="3.aspx"
Left="292"
Top="0"
Right="431"
Bottom="53" />
</asp:ImageMap>
</div>
</form>
</body>
</html>

复制代码

执行结果如下：

每个RectangleHotSpot都包含用来描述矩形区域的Lef、Top、Right和Bottom属性。每个RectangleHotSpot也包含一个NavigateUrl属性，该属性含有该图像映射链接区域的URL。

提示

为网站images文件夹添加图片的方法，请阅读“ASP.NET使用ImageButton控件”。

来源：https://blog.csdn.net/fanwenyuan_fwy/article/details/55046527
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

		自动登录	找回密码
密码			会员注册

ASP.NET使用ImageMap控件