ImageMap 控件

       网页通常包含复杂的图形,当单击图形的不同部分时,会有不同的行为。ASP.NET 开发人员能够使用多种技巧来实现这个设计:

  • 拼接的图像控件。当多个无边界的图像一张挨一张仔细的定位后,看起来就像是一幅图。于是,你可以分别处理每一个控件的单击,这种方式对于已经定义矩形边界的按钮和导航控件很有效
  • ImageButton当 ImageButton 被单击时,它提供单击发生处的坐标。你可以在服务器端检测这些坐标,通过编程确定哪一部分被单击了。这种方式灵活但是编码较繁琐容易出错。
  • ImageMap你可以定义独立的区域,并唯一的命名每个区域。只有鼠标落于某个定义的区域内,指针才会变成手形,因此,这个方法对于有小热点的细致的图像很有效

 

       ImageMap 控件是对于 HTML 中用于定义图像映射(image map)的 <map> 和 <area> 标签的服务器端抽象。ImageMap 将自己呈现为一个 <map> 标签。通过向 ImageMap.HotSpots 集合中添加 HotSpot 对象来定义区域,每个区域被呈现为一个 <area> 标签。在 <map> 之前,ASP.NET 呈现出显示图片并使用图像区域的带链接的 <img> 标签。

 

创建热点

       为了定义可以单击的区域,需要向 ImageMap.HotSpots 属性里添加 HotSpot 对象。可以使用 3 个派生类:CircleHotSpot、RectangleHotSpot、PolygonHotSpot,它们与 HTML 标准中定义的 3 种形状类型一一对应。

       在这之前,需要获知穿件的热点的确切坐标。VS 的 ImageMap 设计器不支持可视化的定义区域。建议使用别的 HTML 编辑器工具做这件事。

       调整好热点之后,可以查看源代码来确定坐标。

  • 定义矩形时,只需要左上角和右下角的坐标。
  • 定义任意多边形时,你可以随意定义多个定点。浏览器从一点出发到另一点画线来创建形状。依据 HTML 标准,建议以起始点作为结束点。
  • 定义圆形时,只需指明圆心坐标及半径即可。例如 <area shape=”circle” coords=”272, 83, 83”…>,圆心位于(272,83),半径 83 像素。

       热点可以重叠,但是先定义的热点才会处理单击事件。

 

       一旦确定了热点,就可以添加相应的 HotSpot 对象了。这里以矩形热点示例:

>
    <asp:RectangleHotSpot Top="41" Left="16" Bottom="285" Right="206" />
    <asp:RectangleHotSpot Top="125" Left="475" Bottom="160" Right="659" />
    <asp:RectangleHotSpot Top="10" Left="222" Bottom="41" Right="671" />
</asp:ImageMap>

相关文章:

  • 2021-10-18
  • 2021-08-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-01-24
  • 2022-02-11
  • 2021-07-26
  • 2022-12-23
  • 2021-12-11
  • 2021-08-01
  • 2022-12-23
相关资源
相似解决方案