ImageMap用法

asp.net|控件
-
ImageMap控件是一个让你可以在图片上定义热点（HotSpot）区域的服务器控件。用户可以通过点击这些热点区域进行

回发（PostBack）操作或者定向（Navigate）到某个URL位址。该控件一般用在需要对某张图片的局部范围进行互动操

作时，其主要属性有HotSpotMode、HotSpots和主要操作Click。
?        HotSpotMode：顾名思义为热点模式，对应枚举类型System.Web.UI.WebControls.HotSpotMode。其选项及说

明如下：
1)        NotSet：未设置项。虽然名为未设置，但其实默认情况下会执行定向操作，定向到你指定的URL位址去。如

果你未指定URL位址，那默认将定向到自己的Web应用程序根目录。
2)        Navigate：定向操作项。定向到指定的URL位址去。如果你未指定URL位址，那默认将定向到自己的Web应用

程序根目录。
3)        PostBack：回发操作项。点击热点区域后，将执行后部的Click事件。
4)        Inactive：无任何操作，即此时形同一张没有热点区域的普通图片。
?        HotSpots：该属性对应着System.Web.UI.WebControls.HotSpot对象集合。HotSpot类是一个抽象类，它之下

有CircleHotSpot（圆形热区）、RectangleHotSpot（方形热区）和PolygonHotSpot（多边形热区）三个子类。实际应

用中，都可以使用上面三种类型来定制图片的热点区域。如果需要使用到自定义的热点区域类型时，该类型必须继承

HotSpot抽象类。下面即有个自定义的菱形热区DiamondHotSpot范例可以参考。
?        Click：对热点区域的点击操作。通常在HotSpotMode为PostBack时用到。

 

可以在页面中添加javascript代码：（获取图片坐标的位置）

    <script language ="javascript" type ="text/javascript" >
       document.οnmοusemοve=function()
        {
            window.status ="X:"+window.event.x+"    Y:"+window.event.y;
        }
    </script>

 

自定义热点区域 DiamondHotSpot 菱形热点区域
 
1.        创建DiamondHotSpot类
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;
 
namespace HotSpotTest
{
    public class DiamondHotSpot : System.Web.UI.WebControls.HotSpot
    {
        public int CenterX
        {
            get
            {
                object val = ViewState["centerx"];
                if (val == null)
                    return 0;
                else
                    return (int)val;
            }
            set
            {
                ViewState["centerx"] = value;
            }
        }
 
        public int CenterY
        {
            get
            {
                object val = ViewState["centery"];
                if (val == null)
                    return 0;
                else
                    return (int)val;
            }
            set
            {
                ViewState["centery"] = value;
            }
        }
 
        public int Width
        {
            get
            {
                object val = ViewState["width"];
                if (val == null)
                    return 0;
                else
                    return (int)val;
            }
            set
            {
                ViewState["width"] = value;
            }
        }
 
        public int Height
        {
            get
            {
                object val = ViewState["height"];
                if (val == null)
                    return 0;
                else
                    return (int)val;
            }
            set
            {
                ViewState["height"] = value;
            }
        }
 
        protected override string MarkupName
        {
            get
            {
                return "poly";
            }
        }
 
        public override string GetCoordinates()
        {
            return CenterX.ToString() + "," +
                       (CenterY - Height / 2).ToString() + "," +
                       (CenterX + Width / 2).ToString() + "," +
                       CenterY.ToString() + "," +
                       CenterX.ToString() + "," +
                       (CenterY + Height / 2).ToString() + "," +
                       (CenterX - Width / 2).ToString() + "," +
                       CenterY.ToString();
        }
    }
}
 
2.        在页面写 Register 指令
<%@ Register TagPrefix="HotSpotTest" Namespace="HotSpotTest" %>
 
3.        在后部代码里动态添加菱形热区，或者直接在页面代码里声明菱形热区
?        后部代码动态添加：
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            HotSpotTest.DiamondHotSpot dhs = new HotSpotTest.DiamondHotSpot();
            dhs.CenterX = 100;
            dhs.CenterY = 50;
            dhs.Height = 100;
            dhs.Width = 50;
 
            ImageMap1.HotSpots.Add(dhs);
        }
}
?        页面代码声明：
    <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="hotspot.jpg" HotSpotMode="PostBack">
        <HotSpotTest:DiamondHotSpot CenterX="100" CenterY="50" Height="100" Width="50" />
</asp:ImageMap>