【发布时间】：2012-09-18 08:42:54
【问题描述】：
我已经动态创建了一个热点区域，我想改变这个热点区域的颜色，我该如何实现呢？我也想显示热点区域的边界。
这是我在 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);
}
}
我尝试使用来自here 的 jquery，但我无法成功。我对 jquery 完全陌生，我只是复制粘贴了 jquery 函数并添加了参考，但它对我不起作用。我不喜欢 js 代码，因为它只是从上面的链接复制粘贴。任何人都可以提供简单的样式或任何 java/jquery 函数，所以我可以看到对热点区域的影响？
请帮助。谢谢。
更新： JAVASCRIPT
<script type="text/javascript" src="JS/JScript.js"></script>
//
<script type="text/javascript" src="JS/jquery.imagemapster.js"></script>
<script type="text/javascript">
function point_it(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) {
//Creates Hotspot Dynamically
__doPostBack('txtall ', '');
//Effects to be applied for the hotspot created
var image = $('#ImageMap1');
image.mapster(
{
fillOpacity: 0.4,
fillColor: "d42e16",
stroke: true,
strokeColor: "3320FF",
strokeOpacity: 0.8,
strokeWidth: 4,
singleSelect: true,
mapKey: 'name',
listKey: 'name',
areas: [
{
fillColor: "ffffff"
},
]
});
}
//Clears hotspot
if (i >= 10) {
__doPostBack('txtall ', '');
str = "";
i = 0;
stringArray = [];
}
}
</script>
ASPX
<form name="pointform" runat="server">
<div id="pointer_div" onclick="point_it(event)" style="width: 500px; height: 333px;">
<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Images/WMap.JPG" 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" OnTextChanged="txtall_TextChanged" AutoPostBack="true"></asp:TextBox>
</form>
如果我将 jquery image.mapster 放在 point_it(event) 未定义时会得到异常。如果我删除 jqery，代码工作正常。
【问题讨论】：
标签： c# javascript jquery asp.net imagemap