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

ASP.NET 2.0 -- ImageMap

Namratha Shah
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.94/5 (7投票s)

2006 年 9 月 8 日

4分钟阅读

viewsIcon

78073

downloadIcon

1903

ASP.NET 2.0 -- ImageMap

Sample Image - example.png

引言

.NET 框架提供了一套不错的 Web 服务器控件，允许您以面向对象的方式为 ASP.NET 编写代码，并隐藏 HTML、脚本和浏览器版本控制的复杂性。不幸的是，它没有提供任何可以生成图像映射（image maps）的控件。我们开发了一个控件，正好可以实现这个功能。

本文将解释如何使用此控件。提供的源代码也可以作为开发自定义 Web 服务器控件的示例。

ImageButton 与 ImageMap 对比

ASP.NET 提供了一个 `ImageButton` 控件，可以处理图像上的鼠标点击事件，但它的行为与图像映射不完全相同。主要区别在于，您无法使用 `ImageButton` 指定热点区域。其后果是：

  • 您必须检查单击的坐标是否在特定范围内。对于矩形区域这相对容易，但对于圆形和多边形则复杂得多。更不用说您必须维护的 `if` 语句数量了。
  • 鼠标悬停在图像上时，光标始终是手指图标。而在图像映射中，手指图标仅在悬停在热点区域时显示。
  • 您无法在同一图像内拥有不同的工具提示。

`ImageMap` 控件解决了所有这些问题，并且可以执行 `ImageButton` 所能完成的所有操作。

创建热点区域

该控件提供了三个类来创建矩形、圆形和多边形区域。要将它们添加到控件中，您只需创建区域实例，然后使用 `Areas` 属性将它们添加到区域列表中。

热点区域的处理顺序取决于它们的添加顺序。如果用户单击的点位于重叠区域上，则会使用第一个区域。

ImageMapRectangleArea

允许创建矩形热点区域。

公共构造函数

public ImageMapRectangleArea(Rectangle rectangle)
public ImageMapRectangleArea(string hRef, Rectangle rectangle)
public ImageMapRectangleArea(string hRef, Rectangle rectangle, 
                             string toolTip)

参数

hRef - 与区域关联的超链接。默认为 null。
rectangle - 矩形区域的位置、宽度和高度，以本地坐标表示。
toolTip - 鼠标光标停留在区域上时显示的字符串。默认为 null。

ImageMapCircleArea

允许创建圆形热点区域。

公共构造函数

public ImageMapCircleArea(Point center, int radius)
public ImageMapCircleArea(string hRef, Point center, int radius)
public ImageMapCircleArea(string hRef, Point center, int radius, 
                          string toolTip)

参数

hRef - 与区域关联的超链接。默认为 null。
center - 圆心，以本地坐标表示。
radius - 圆的半径。
toolTip - 鼠标光标停留在区域上时显示的字符串。默认为 null。

ImageMapPolygonArea

允许创建多边形热点区域。

公共构造函数

public ImageMapPolygonArea()
public ImageMapPolygonArea(string hRef)
public ImageMapPolygonArea(string hRef, string toolTip)

参数

hRef - 与区域关联的超链接。默认为 null。
toolTip - 鼠标光标停留在区域上时显示的字符串。默认为 null。

备注

使用 `ImageMapPolygonArea` 的 `Points` 参数添加多边形顶点。

带超链接的图像映射

您可以创建带有与热点区域关联的超链接的常规图像映射。当用户单击它们时，浏览器会跳转到指定的 URL。只需添加具有非空 URL 的区域即可。

private void Page_Load(object sender, System.EventArgs e)
{
    // add a rectangular area

    imageMap.Areas.Add(
          new ImageMapRectangleArea("http://www.ydreams.com/", 
                                    new Rectangle(405, 188, 15, 15), 
                                    "Click to go to YDreams"));
    
    // add a circular area

    imageMap.Areas.Add(
         new ImageMapCircleArea("https://codeproject.org.cn/", 
                                new Point(210, 197), 100, 
                                "Click to go to CodeProject"));
    
    // add a polygon area

    ImageMapPolygonArea polygonArea
             = new ImageMapPolygonArea("", "This area has no link");

    polygonArea.Areas.Add(new Point(0, 0));
    polygonArea.Areas.Add(new Point(100, 0));
    polygonArea.Areas.Add(new Point(0, 100));
    imageMap.Areas.Add(polygonArea);
}

如果热点区域的 URL 设置为空字符串，则它没有超链接。鼠标光标将是箭头，但工具提示仍然会显示。

带服务器端事件处理的图像映射

如果您需要处理的不仅仅是区域，还有用户单击点的坐标，您可以将它们发送到服务器并由服务器进行处理。

private void Page_Load(object sender, System.EventArgs e)
{
    imageMap.Click += new ImageMapClickEventHandler(imageMap_Click);

    imageMap.Areas.Add(new ImageMapRectangleArea(null, 
             new Rectangle(405, 188, 15, 15), "Click to go to YDreams"));
    imageMap.Areas.Add(new ImageMapRectangleArea(null,
             new Rectangle(405, 379, 15, 15), "Click to go to CodeProject"));
}

private void ImageMap_Click(object sender, ImageMapClickEventArgs args)
{
    ImageMapArea area = imageMap.Areas[args.AreaIndex];
    int x = args.X;
    int y = args.Y
    
    // add event handling code here

}

为此，您只需为控件的 `Click` 事件分配一个事件处理程序，并将所有您希望在服务器端处理的区域的 URL 设置为 `null`。

只有当用户单击一个热点区域时，该事件才会触发。要模拟 `ImageButton`，您只需添加一个占据整个图像的区域。

带客户端事件处理的图像映射

如果您想节省到服务器的流量，并且浏览器支持客户端脚本，您可以让事件在客户端进行处理。

private void Page_Load(object sender, System.EventArgs e)
{
    // create an instance of the area

    ImageMapArea area
         = new ImageMapRectangleArea("https://codeproject.org.cn/", 
                                     new Rectangle(405, 379, 15, 15), 
                                     "Click to go to CodeProject");    
    // add the area to the map

    imageMap.Areas.Add(area);
    
    // add OnMouseOver and OnMouseOut event handlers to the area

    area.Attributes.Add("onMouseOver", "javascript:DisplayImage(image2)");
    area.Attributes.Add("onMouseOut", "javascript:DisplayImage(image1)");
    
    // add the script called by the event handlers

    StringBuilder script = new StringBuilder();
    script.AppendFormat("<script language="\""javascript\">{0}", 
                        Environment.NewLine);
    script.AppendFormat("var image1 = new Image(291, 112);{0}", 
                        Environment.NewLine);
    script.AppendFormat("image1.src = \"image1.png\";{0}", 
                        Environment.NewLine);
    script.AppendFormat("var image2 = new Image(291, 112);{0}", 
                        Environment.NewLine);
    script.AppendFormat("image2.src = \"image2.png\";{0}", 
                        Environment.NewLine);
    script.AppendFormat("function DisplayImage(image) {0}{1}", "{", 
                        Environment.NewLine);
    script.AppendFormat("document.imageMap.src = image.src;{0}", 
                        Environment.NewLine);
    script.AppendFormat("return true;{0}", Environment.NewLine);
    script.AppendFormat("\t{0}{1}", "}", Environment.NewLine);
    script.Append("</script>");

    Page.RegisterClientScriptBlock("DisplayImage", script.ToString());
}

混合使用图像映射类型

您可以混合使用上述三种类型的图像映射。唯一的限制是，您不能为希望在服务器端处理的区域（URL 设置为 `null` 的区域）分配 `onClick` 客户端事件处理程序。

支持的浏览器

  • Internet Explorer 6.0

接下来呢？

支持更多浏览器。任何帮助都欢迎...

© . All rights reserved.