Hi, I'm trying to incorperate a image map of the UK onto my site, the aim is to get my visitors to select the region or ideally the county in which they live in, and then get this information returned from the form via e-mail. I can do it but only if the form information is submitted when the visitor clicks on a area of the image map, how can i get the image map to return the county with the rest of the information gathered on the form when the visitor clicks the submit button.<br />
Any help would be much appreciated.<br />
<br />
Thanks<!--content-->You could set up an imagemap with areas like the following:<br />
<area href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:SetCounty('Cornwall')" ...><br />
<br />
You could then use the SetCounty function to store the county in a hidden field:<br />
<input type="hidden" name="county"><br />
<script type="text/javascript"><br />
function SetCounty(county){<br />
document.formname.county.value = county;<br />
}<br />
</script><br />
<br />
Adam<br />
<br />
P.S. Remember this won't work for the 13% or so of users with JS disabled, so build in a workaround.<!--content-->It's easily done using JavaScript but you need a backup method for the 13% of users who do not use JavaScript.<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<meta name="Content-Script-Type" content="text/javascript"><br />
<title>Example</title><br />
<form action="" onsubmit="return false"><br />
<div><br />
<select name="region"><br />
<option value="ne">North East</option><br />
<option value="ma">Midatlantic</option><br />
<option value="se">Southeast</option><br />
<option value="sw">Southwest</option><br />
<option value="pc">Pacific Coast</option><br />
<option value="mw">Midwest</option><br />
<option value="in">International</option><br />
</select><br />
<script type="text/javascript"><br />
<!--<br />
document.write('<img src=http://www.webdeveloper.com/forum/archive/index.php/"color1.png" usemap="#usa" alt="map of the regions of the USA">');<br />
// --><br />
</script><br />
<map name="usa"><br />
<area shape="poly" alt="Northeast" coords="234,61,290,59,290,7,234,7" onclick="forms[0].region.selectedIndex = 0"><br />
<area shape="poly" alt="Midatlantic" coords="210,70,210,100,236,100,268,62" onclick="forms[0].region.selectedIndex = 1"><br />
<area shape="poly" alt="Southeast" coords="163,114,266,97,270,101,244,148,256,170,258,178,258,188,256,187,252,187,237,167,237,160,232,155,227,1 55,223,158,219,155,198,156,198,167,187,167,187,164,170,163,172,155,167,147,167,139,164,135,164,121" onclick="forms[0].region.selectedIndex = 2"><br />
<area shape="poly" alt="Southwest" coords="155,89,170,166,152,193,46,142,60,73" onclick="forms[0].region.selectedIndex = 3"><br />
<area shape="poly" alt="Pacific Coast" coords="4,9,60,12,46,139,4,141" onclick="forms[0].region.selectedIndex = 4"><br />
<area shape="poly" alt="Midwestwest" coords="60,18,76,79,156,89,164,112,191,114,230,26" onclick="forms[0].region.selectedIndex = 5"><br />
<area shape="rect" alt="International" coords="0,0,298,200"onclick="forms[0].region.selectedIndex = 6"><br />
</map><br />
</div><br />
</form><!--content-->
Any help would be much appreciated.<br />
<br />
Thanks<!--content-->You could set up an imagemap with areas like the following:<br />
<area href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:SetCounty('Cornwall')" ...><br />
<br />
You could then use the SetCounty function to store the county in a hidden field:<br />
<input type="hidden" name="county"><br />
<script type="text/javascript"><br />
function SetCounty(county){<br />
document.formname.county.value = county;<br />
}<br />
</script><br />
<br />
Adam<br />
<br />
P.S. Remember this won't work for the 13% or so of users with JS disabled, so build in a workaround.<!--content-->It's easily done using JavaScript but you need a backup method for the 13% of users who do not use JavaScript.<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<meta name="Content-Script-Type" content="text/javascript"><br />
<title>Example</title><br />
<form action="" onsubmit="return false"><br />
<div><br />
<select name="region"><br />
<option value="ne">North East</option><br />
<option value="ma">Midatlantic</option><br />
<option value="se">Southeast</option><br />
<option value="sw">Southwest</option><br />
<option value="pc">Pacific Coast</option><br />
<option value="mw">Midwest</option><br />
<option value="in">International</option><br />
</select><br />
<script type="text/javascript"><br />
<!--<br />
document.write('<img src=http://www.webdeveloper.com/forum/archive/index.php/"color1.png" usemap="#usa" alt="map of the regions of the USA">');<br />
// --><br />
</script><br />
<map name="usa"><br />
<area shape="poly" alt="Northeast" coords="234,61,290,59,290,7,234,7" onclick="forms[0].region.selectedIndex = 0"><br />
<area shape="poly" alt="Midatlantic" coords="210,70,210,100,236,100,268,62" onclick="forms[0].region.selectedIndex = 1"><br />
<area shape="poly" alt="Southeast" coords="163,114,266,97,270,101,244,148,256,170,258,178,258,188,256,187,252,187,237,167,237,160,232,155,227,1 55,223,158,219,155,198,156,198,167,187,167,187,164,170,163,172,155,167,147,167,139,164,135,164,121" onclick="forms[0].region.selectedIndex = 2"><br />
<area shape="poly" alt="Southwest" coords="155,89,170,166,152,193,46,142,60,73" onclick="forms[0].region.selectedIndex = 3"><br />
<area shape="poly" alt="Pacific Coast" coords="4,9,60,12,46,139,4,141" onclick="forms[0].region.selectedIndex = 4"><br />
<area shape="poly" alt="Midwestwest" coords="60,18,76,79,156,89,164,112,191,114,230,26" onclick="forms[0].region.selectedIndex = 5"><br />
<area shape="rect" alt="International" coords="0,0,298,200"onclick="forms[0].region.selectedIndex = 6"><br />
</map><br />
</div><br />
</form><!--content-->