C# 如何在图像地图上设置热点区域的颜色

我已经动态创建了一个热点区域，我想改变这个热点区域的颜色，我如何才能做到这一点？我还想展示热点区域的边界

下面是我在c#中动态创建图像地图热点的代码

protected void txtall_TextChanged(object sender, EventArgs e)
{
    string[] arr = txtall.Text.Split(',');
//create hotspot once there are 10 cordinates
    if (arr.Length == 10)
    {
        PolygonHotSpot Polygon1 = new PolygonHotSpot();
        Polygon1.Coordinates = arr[0].ToString() + "," + arr[1].ToString() + "," + arr[2].ToString() + "," + arr[3].ToString()
            + "," + arr[4].ToString() + "," + arr[5].ToString() + "," + arr[6].ToString() + "," + arr[7].ToString() + "," + arr[8].ToString() + "," + arr[9].ToString();// "128,185,335,157,400,224,400,400,228,400";

        Polygon1.NavigateUrl="http://www.google.com";
        Polygon1.AlternateText = "Southern Region";

        ImageMap1.HotSpots.Add(Polygon1);
    }
}

我曾尝试使用来自的jquery，但未能成功。我对jquery绝对是新手，我只是简单地复制粘贴了jquery函数并添加了引用，但它对我来说不起作用。我正在更新js代码，因为它只是从上面的链接复制粘贴。有人能提供一个简单的样式或任何java/jquery函数，以便我能看到热点区域的效果吗

请帮忙，谢谢

更新： JAVASCRIPT

//
功能点_it（事件）{
pos_x=event.offsetX？（event.offsetX）：event.pageX-document.getElementById（“pointer_div”）.offsetLeft；
pos_y=event.offsetY？（event.offsetY）：event.pageY-document.getElementById（“pointer_div”）.offsetTop；
document.getElementById（“ImageMap1”）.style.left=（pos_x-1）；
document.getElementById（“ImageMap1”）.style.top=（pos_y-15）；
document.getElementById（“txt1”）.value=pos\u x；
document.getElementById（“txt2”）.value=pos_y；
if（document.getElementById（“txtall”）.value==“”）{
document.getElementById（“txtall”）.value=pos_x+，“+pos_y；
}
否则{
document.getElementById（“txtall”）.value=document.getElementById（“txtall”）.value+，“+pos_x+”，“+pos_y；
}
var str=document.getElementById（“txtall”）.value；
var stringArray=新数组（）；
stringArray=str.split（“，”）；
对于（i=0；i=10）{
__doPostBack（'txtall'，''）；
str=“”；
i=0；
stringArray=[]；
}
}

ASPX

---

如果我放置jquery

image.mapster

，我会得到异常，因为

点\u它（事件）

未定义。。如果我删除jqery，代码可以正常工作

为此使用任何JQuery插件

---

找到了一个

我拿了你的代码并编辑了它。它现在在txtall上进行回发，它有10个坐标。之后会有一个回发，然后你会看到你的彩色区域

脚本代码

<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/imageMapster/jquery.imagemapster.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var image = $('#ImageMap1');
        image.mapster({
            fillOpacity: 0.4,
            fillColor: "d42e16",
            stroke: true,
            strokeColor: "3320FF",
            strokeOpacity: 0.8,
            strokeWidth: 4,
            singleSelect: true,
            mapKey: 'shape',
            listKey: 'shape'
        });

        $("#pointer_div").click(function(event) {
            pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft;
            pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop;
            document.getElementById("ImageMap1").style.left = (pos_x - 1);
            document.getElementById("ImageMap1").style.top = (pos_y - 15);

            document.getElementById("txt1").value = pos_x;
            document.getElementById("txt2").value = pos_y;
            if (document.getElementById("txtall").value == "") 
                document.getElementById("txtall").value = pos_x + "," + pos_y;
            else 
                document.getElementById("txtall").value = document.getElementById("txtall").value + "," + pos_x + "," + pos_y;

             var str = document.getElementById("txtall").value;
             var stringArray = new Array();
             stringArray = str.split(",");
             for (i = 0; i < stringArray.length; i++) {
                stringArray[i];
            }
            if (i == 10) 
            {
                __doPostBack('txtall ', '');

            }
            //Clears hotspot
            if (i >= 10) {
                __doPostBack('txtall ', '');
                str = "";
                i = 0;
                stringArray = [];
            }
        });
    });                
</script>

<form id="form1" runat="server">
<div>
    <div id="pointer_div" style="width: 500px; height: 333px;">
        <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="pic/usa_map_720.png" Style="width: 500px;
            height: 333px;">
        </asp:ImageMap>
    </div>
    <br />
    <asp:TextBox ID="txt1" runat="server"></asp:TextBox>
    <asp:TextBox ID="txt2" runat="server"></asp:TextBox>
    <br />
    <asp:TextBox ID="txtall" runat="server" AutoPostBack="true" OnTextChanged="txtall_TextChanged" Text=""></asp:TextBox>
</div>
</form>

<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/imageMapster/jquery.imagemapster.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var image = $('#ImageMap1');
        image.mapster({
            fillOpacity: 0.4,
            fillColor: "d42e16",
            stroke: true,
            strokeColor: "3320FF",
            strokeOpacity: 0.8,
            strokeWidth: 4,
            singleSelect: true,
            mapKey: 'shape',
            listKey: 'shape'
        });

        $("#pointer_div").click(function(event) {
            pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft;
            pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop;
            document.getElementById("ImageMap1").style.left = (pos_x - 1);
            document.getElementById("ImageMap1").style.top = (pos_y - 15);

            document.getElementById("txt1").value = pos_x;
            document.getElementById("txt2").value = pos_y;
            if (document.getElementById("txtall").value == "") 
                document.getElementById("txtall").value = pos_x + "," + pos_y;
            else 
                document.getElementById("txtall").value = document.getElementById("txtall").value + "," + pos_x + "," + pos_y;

             var str = document.getElementById("txtall").value;
             var stringArray = new Array();
             stringArray = str.split(",");
             for (i = 0; i < stringArray.length; i++) {
                stringArray[i];
            }
            if (i == 10) 
            {
                __doPostBack('txtall ', '');

            }
            //Clears hotspot
            if (i >= 10) {
                __doPostBack('txtall ', '');
                str = "";
                i = 0;
                stringArray = [];
            }
        });
    });                
</script>

<form id="form1" runat="server">
<div>
    <div id="pointer_div" style="width: 500px; height: 333px;">
        <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="pic/usa_map_720.png" Style="width: 500px;
            height: 333px;">
        </asp:ImageMap>
    </div>
    <br />
    <asp:TextBox ID="txt1" runat="server"></asp:TextBox>
    <asp:TextBox ID="txt2" runat="server"></asp:TextBox>
    <br />
    <asp:TextBox ID="txtall" runat="server" AutoPostBack="true" OnTextChanged="txtall_TextChanged" Text=""></asp:TextBox>
</div>
</form>

protected void txtall_TextChanged(object sender, EventArgs e)
{
    string[] arr = txtall.Text.Split(',');
    //create hotspot once there are 10 cordinates
    if (arr.Length == 10)
    {
        PolygonHotSpot Polygon1 = new PolygonHotSpot();
        Polygon1.Coordinates = arr[0].ToString() + "," + arr[1].ToString() + "," + arr[2].ToString() + "," + arr[3].ToString()
            + "," + arr[4].ToString() + "," + arr[5].ToString() + "," + arr[6].ToString() + "," + arr[7].ToString() + "," + arr[8].ToString() + "," + arr[9].ToString();// "128,185,335,157,400,224,400,400,228,400";

        Polygon1.NavigateUrl = "http://www.google.com";
        Polygon1.AlternateText = "Southern Region";

        ImageMap1.HotSpots.Add(Polygon1);
    }
}