Java script coordinates, please help.

Posted by Pepsi78 under JavaScript on 9/12/2009 | Views : 1635 | Status : [Member] | Replies : 2
Can anyone please help me, I need to restrict an area on the image but also get the coordinates from the image. I have searched the internet for a solution but came up with nothing. I am using a form element "input type=image" so I can get the X Y coordinates from an image. The problem is that I don't want the user clicking on a whole image, in this case a map of a country. I don't want the users clicking off the country's borders in to another country and I want to be able to get the coordinates from inside the country.

I have tried to mix the element from the form with the area shape so when someone will click on the image it will first verify if it's over the hotspot and if it's over the poly coords then it will allow the user to click, the form will submit and the coordinates will be stored into the database.

Java script is not my love so I have no idea what to do. I can't code it as a developer but I can understand it. If anyone can help me I would appreciate it. I just don't know how I could integrate javascript into this.

This is my code, not really something functional, the coordinates will pass on to the next page as a variable but limiting the area where the users may click is something that I have not figured out. I can create an area shape but without getting the coordinates from the image.

Anything will do, even without <input type=image , if there is some way around this so I can make this work.


<script type="text/javascript">
function myEye() {
document.coordform.submit();
}
</script>

<form action='store.php' method=post name="coordform">

<input type='image' alt='' src='map.png' name='foo' style=cursor:crosshair; USEMAP="#map"/>

<map id="USEMAP="#map" name="map">

<area shape="poly"
coords="584,200,540,256,500,278,507,321,499,328,482,331,464,376,461,392,412,458,392,511,373,559,348, 592,313,602,310,629,302,633,316,663,303,681,287,680,262,732,239,739,179,718,155,768,125,774,104,757, 43,762,156,893,170,889,177,897,179,916,164,957,234,1054,267,1076,346,1115,348,1140,316,1192,359,1228 ,334,1248,312,1247,383,1305,445,1320,483,1362,506,1377,552,1303,581,1303,606,1301,627,1335,661,1355, 662,1385,606,1392,592,1420,706,1522,736,1533,731,1561,705,1574,687,1591,686,1616,721,1631,771,1614,8 64,1621,969,1656,1045,1677,1123,1649,1170,1685,1231,1667,1287,1680,1349,1705,1475,1600,1529,1561,174 8,1494,1848,1505,1915,1536,2010,1552,2075,1622,2175,1636,2182,1538,2175,1422,2286,1254,2402,1224,241 8,1057,2375,1027,2297,1059,2248,1088,2217,1072,2216,1108,2168,1108,2123,1098,2061,1061,2069,1032,202 1,977,2032,940,2014,790,2011,735,2034,691,2039,652,2040,585,1994,467,1932,420,1912,370,1871,355,1861 ,304,1798,230,1788,194,1748,111,1674,20,1572,48,1536,115,1524,120,1379,140,1287,149,1273,201,1259,20 8,1208,217,1179,178,1132,130,1059,139,977,120,954,130,938,113,860,100,860,115,790,70,773,97,740,118, 694,171,676,189,652,197,619,181,602,201,590,200" href="" target="" onClick="myEye()" />
</map>
</form>




Responses

Posted by: Vuyiswamb on: 9/28/2009 [Member] [MVP] [Administrator] NotApplicable

Up
0
Down
Good Day Pepsi78

Please use the Code Tags Provided in the Toolbox to format your code. Did you get a Solution to this Problem?

Thank you for posting at Dotnetfunda


Vuyiswa Maseko

Thank you for posting at Dotnetfunda
[Administrator]

Pepsi78, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Pepsi78 on: 9/28/2009 [Member] Starter

Up
0
Down
This is my code. I did not get an answer, I only wish I had an answer, I have tried on other boards as well but no luck.


<script type="text/javascript"> 

function myEye() {
document.coordform.submit();
}
</script>

<form action='store.php' method=post name="coordform">

<input type='image' alt='' src='map.png' name='foo' style=cursor:crosshair; USEMAP="#map"/>

<map id="USEMAP="#map" name="map">

<area shape="poly"
coords="584,200,540,256,500,278,507,321,499,328,482,331,464,376,461,392,412,458,392,511,373,559,348, 592,313,602,310,629,302,633,316,663,303,681,287,680,262,732,239,739,179,718,155,768,125,774,104,757, 43,762,156,893,170,889,177,897,179,916,164,957,234,1054,267,1076,346,1115,348,1140,316,1192,359,1228 ,334,1248,312,1247,383,1305,445,1320,483,1362,506,1377,552,1303,581,1303,606,1301,627,1335,661,1355, 662,1385,606,1392,592,1420,706,1522,736,1533,731,1561,705,1574,687,1591,686,1616,721,1631,771,1614,8 64,1621,969,1656,1045,1677,1123,1649,1170,1685,1231,1667,1287,1680,1349,1705,1475,1600,1529,1561,174 8,1494,1848,1505,1915,1536,2010,1552,2075,1622,2175,1636,2182,1538,2175,1422,2286,1254,2402,1224,241 8,1057,2375,1027,2297,1059,2248,1088,2217,1072,2216,1108,2168,1108,2123,1098,2061,1061,2069,1032,202 1,977,2032,940,2014,790,2011,735,2034,691,2039,652,2040,585,1994,467,1932,420,1912,370,1871,355,1861 ,304,1798,230,1788,194,1748,111,1674,20,1572,48,1536,115,1524,120,1379,140,1287,149,1273,201,1259,20 8,1208,217,1179,178,1132,130,1059,139,977,120,954,130,938,113,860,100,860,115,790,70,773,97,740,118, 694,171,676,189,652,197,619,181,602,201,590,200" href="" target="" onClick="myEye()" />
</map>
</form




Pepsi78, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response