I have dynamically created a hotspot region and i want to change the color of this hotspot region how can i achieve this? i also want to show the border of the hotspot region.
Here is my code to create a hotspot on a image map in c# dynamically
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);
}
}
I have tried to use the jquery from here but i am not able to succeed. I am absolutely new to jquery, i simply copy pasted the jquery function and added reference but it did not work for me.i am nt shwing up js code as it is simply copy paste from the above link.Can anyone provide a simple style or any java/jquery function so dat i can see an effect on the hotspot region?
Kindly help.thank You.
UPDATE: 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>
If i put the jquery image.mapster than i get the exception as point_it(event) is undefined.. code works fine if i remove the jqery.
I took your code and edited it. It now does a postback on txtall has 10 coordinates. Afterwards there is a postBack and then you see your colored area!
ScriptCode
<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>
ASPX Code
<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>
CodeBehind
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);
}
}