Can anyone please help me, I need to restrict an area on the image but also get the coordinates from the image.
I am using a form element "input type=image" so I can get the X Y coordinates from an 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,48 2,331,464,376,461,392,412,458,392,511,373,559,348, 592,313,602,310,629,302,633,316,663,303,681,287,68 0,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,1 561,705,1574,687,1591,686,1616,721,1631,771,1614,8 64,1621,969,1656,1045,1677,1123,1649,1170,1685,123 1,1667,1287,1680,1349,1705,1475,1600,1529,1561,174 8,1494,1848,1505,1915,1536,2010,1552,2075,1622,217 5,1636,2182,1538,2175,1422,2286,1254,2402,1224,241 8,1057,2375,1027,2297,1059,2248,1088,2217,1072,221 6,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,15 36,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>
