65.9K
CodeProject 正在变化。 阅读更多。
Home

HtmlMap Web 控件

Bashir Magomedov
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.71/5 (4投票s)

2007年3月12日

CPOL

3分钟阅读

viewsIcon

51907

downloadIcon

397

本文介绍了 HtmlMap Web控件。 提供了一些描述和代码实现。

引言

.NET 2.0 类库包含一个非常有用的 Web 控件，名为 ImageMap。 它包含一个图像和它的 HTML 映射。 我们可以定义一些称为 HotSpot(s) 的区域，并为每个热点分配一个形状（圆形、矩形或多边形）和相应的引用。 一切运行良好，但有一件事例外。 我们无法在客户端代码中操作我们的图像，因为它被隐藏并且它的 ID 是自动分配的。

HTML 图像映射

图 1. 太阳系图像映射
MercuryVenusEarthMoonMarsJupiterSaturnUranusNeptune

首先，让我们回顾一下图像映射在普通 HTML 中的组织方式。 我们需要在 HTML 文件中包含图像（通过 <img> 标签）和地图（通过 <map> 标签）。 在 <img> 标签中，我们必须指定图像文件的 URL 和我们将用来映射图像的地图 ID

<img src="planets.jpg" width="513" height="649" border="0" usemap="#PlanetsMap" />

然后，我们必须指定图像上的区域以及这些区域的相应引用。 请注意，map 标签的 ID 属性是 "PlanetsMap"，而不是 "#PlanetsMap"。

<map name="PlanetsMap" id="Map1">
<area shape="poly" coords="139,58,122,66,116,84,121,94,124,101,132,107,
140,110,146,111,138,100,134,88,134,78,137,68" 
  href="http://pds.jpl.nasa.gov/planets/choices/mercury1.htm" alt="Mercury" />
<area shape="poly" coords="176,40,195,44,207,54,217,70,217,
        82,210,91,202,102,197,114,196,119,185,121,169,121,
        158,117,144,108,137,95,136,82,137,67,145,54,158,43" 
    href="http://pds.jpl.nasa.gov/planets/choices/venus1.htm" alt="Venus" />
  <area shape="circle" coords="247,128,50" 
    href="http://pds.jpl.nasa.gov/planets/choices/earth1.htm" alt="Earth" />
  <area shape="circle" coords="340,88,18" 
    href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/moonfact.html" alt="Moon" />  
  <area shape="circle" coords="337,191,36" 
    href="http://pds.jpl.nasa.gov/planets/choices/mars1.htm" alt="Mars" />
<area shape="poly" coords="391,254,438,269,457,285,473,306,
      483,337,483,355,474,383,467,396,456,409,429,428,417,434,400,438,
      383,437,368,437,362,431,359,409,351,390,342,375,328,363,316,358,308,356,301,
      346,302,331,309,306,323,285,342,267,371,257" 
  href="http://pds.jpl.nasa.gov/planets/choices/jupiter1.htm" alt="Jupiter" />  
<area shape="poly" coords="157,331,175,330,201,341,222,350,240,357,
      248,362,263,359,287,355,303,358,331,369,344,384,355,401,359,419,360,432,
      365,438,376,442,388,455,401,464,419,482,429,493,433,509,429,515,414,515,
      385,505,358,494,333,481,324,488,314,490,308,491,303,478,295,466,282,458,
      266,447,257,447,246,445,236,445,229,446,224,434,224,420,223,411,211,400,
      197,392,182,379,171,365,162,353,154,339" 
  href="http://pds.jpl.nasa.gov/planets/choices/saturn1.htm" alt="Saturn" />
  <area shape="poly" coords="207,460,235,446,270,450,297,472,309,500,
       306,537,284,562,262,576,236,575,219,570,213,564,222,538,225,509,219,481" 
   href="http://pds.jpl.nasa.gov/planets/choices/uranus1.htm" alt="Uranus" />
<area shape="circle" coords="123,520,101" 
    href="http://pds.jpl.nasa.gov/planets/choices/neptune1.htm" 
    alt="Neptune" />
</map>

HtmlMap Web 控件

为了在 ASPX 网页中获得相同的功能，开发了 HtmlMap Web 控件。 它包括两个类和一个枚举

public enum AreaShapesEnum
public class MapArea
public class HtmlMap : System.Web.UI.WebControls.WebControl

AreaShapesEnum 由 MapArea 类使用，表示给定地图区域的可能形状。 它可以取以下值

  • 圆形
  • 多边形
  • 矩形

MapArea 还包括以下成员

public List<int> Coords 获取或设置给定 MapArea 对象的坐标的 System.Collections.Generic.List。
public Uri Href 获取或设置此 MapArea 对象的 System.Uri。
public string Alt 获取或设置此区域对象的替代文本。
public Dictionary<string, string> Attributes 获取或设置此 MapArea 对象的其他属性的 System.Collections.Generic.Dictionary 数组。

使用最后一个属性允许定义许多客户端事件处理程序。 例如，要定义鼠标悬停事件的客户端事件处理程序，只需使用以下代码

MapArea map = new MapArea();
map.Attributes.Add("onmouseover", "javascript:alert('mouseover');");

HtmlMap 控件包括以下成员

public string NAME 获取或设置生成的 map 标签的 ID 和 NAME 属性。
public List<MapArea> AREAS 获取或设置此 HtmlMap 对象的 MapArea 对象列表。

System.Web.UI.WebControls.WebControl 的受保护的 Render 方法被重写，以便正确地将 HtmlMap 控件及其所有区域呈现到 HTML 中。

使用 HtmlMap 控件

要使用 HtmlMap 控件，只需创建它的实例并设置 NAME 属性。 然后，创建多个 MapArea 对象，填充它们的属性，并将它们添加到 HtmlMap.AREAS 列表中。

以下是生成一个 HtmMap 对象并为上图中水星行星定义 MapArea 的示例

HtmlMap planetsMap = new HtmlMap();
planetsMap.NAME = "PlanetsMap";

MapArea mercuryArea = new MapArea();
mercuryArea.Shape = AreaShapesEnum.POLY;
mercuryArea.Href = 
  new Uri(@"http://pds.jpl.nasa.gov/planets/choices/mercury1.htm");
mercuryArea.Alt = "Mercury";
mercuryArea.Coords = new List<int>(new int[] { 139, 58, 122, 66, 
116, 84, 121, 94, 124, 101, 132,
107, 140, 110, 146, 111, 138, 100, 134, 88, 134, 78, 137, 68 });
planetsMap.AREAS.Add(mercuryArea);

最后，将生成的 HtmlMap 对象添加到窗体的 Controls 集合中。

form1.Controls.Add(planetsMap);

使用 HtmlMap 控件生成的地图的 HTML 代码与手动编写的代码类似。 但是，使用 HtmlMap 控件，我们甚至可以为自动生成的图像（对于某些类型的图表、地理地图等）生成地图。

© . All rights reserved.