欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET 中ImageMap控件的用法

程序员文章站 2023-12-16 10:32:10
利用 asp.net imagemap 控件可以创建一个图像,使其包含许多可由用户单击的区域(热区),这些区域称为“作用点”。每一个作用点都可以是一个单独的超链接或回发事件...

利用 asp.net 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对象。

示例代码:

default.aspx

复制代码 代码如下:

<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %>
 
<!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>示例8-4</title>
    <link id="instancestyle" href="stylesheet.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <fieldset style="width: 290px">
                <legend class="maintitle">imagemap控件典型应用</legend>
                <br />
                <asp:imagemap id="imagemap1" runat="server" imageurl="~/image/pic1.png" onclick="imagemap1_click">
                    <asp:rectanglehotspot alternatetext="模块" bottom="175" left="77" navigateurl="http://localhost/"
                        right="150" target="_blank" top="119" />
                    <asp:circlehotspot alternatetext="处理1" hotspotmode="postback" postbackvalue="pro1"
                        radius="39" x="241" y="50" />
                    <asp:circlehotspot alternatetext="处理2" hotspotmode="postback" postbackvalue="pro2"
                        radius="39" x="241" y="285" />
                    <asp:polygonhotspot alternatetext="引擎" coordinates="366,118,325,160,372,206,411,161"
                        hotspotmode="inactive" />
                </asp:imagemap>
                <br />
                <asp:label id="labmessage" runat="server"></asp:label>
            </fieldset>
        </div>
    </form>
</body>
</html>

default.aspx.cs

复制代码 代码如下:

using system;
using system.data;
using system.configuration;
using system.web;
using system.web.security;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.webcontrols.webparts;
using system.web.ui.htmlcontrols;
 
public partial class _default : system.web.ui.page
{
    protected void page_load(object sender, eventargs e)
    {
    }
    protected void imagemap1_click(object sender, imagemapeventargs e)
    {
        string region = "";
        switch (e.postbackvalue)
        {
            case "pro1":
                region = "处理1";
                break;
            case "pro2":
                region = "处理2";
                break;
        }
        labmessage.text = "您单击的是<b>" + region + "</b>.";
    }
}
相关标签: ASP.NET ImageMap

上一篇:

下一篇: