help [Archive] - WebDeveloper.com

STL

11-18-2003, 01:09 PM

I have an image map of the USA, here is what I want to do, I want to be able to click on a state, and the name of that state go into a text box....

How do I do that?

gil davis

11-18-2003, 01:15 PM

You can add some script to the onclick of the AREA tag.
<MAP name="...">
<AREA href="..." onclick="document.formName.textBoxName.value='New York'">
...
</MAP>

STL

11-18-2003, 01:17 PM

Thanks :)

Charles

11-18-2003, 01:25 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">

</style>

<img src="images/color1.png" usemap="#usa" alt="map of the regions of the USA"> <map name="usa">
<area href="#" shape="poly" alt="Northeast" coords="234,61,290,59,290,7,234,7" onclick="document.getElementById('area').value = this.alt; return false">
<area href="#" shape="poly" alt="Midatlantic" coords="210,70,210,100,236,100,268,62" onclick="document.getElementById('area').value = this.alt; return false">
<area href="#" 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="document.getElementById('area').value = this.alt"; return false>
<area href="#" shape="poly" alt="Southwest" coords="155,89,170,166,152,193,46,142,60,73" onclick="document.getElementById('area').value = this.alt; return false">
<area href="#" shape="poly" alt="Pacific Coast" coords="4,9,60,12,46,139,4,141" onclick="document.getElementById('area').value = this.alt; return false">
<area href="#" shape="poly" alt="Midwestwest" coords="60,18,76,79,156,89,164,112,191,114,230,26" onclick="document.getElementById('area').value = this.alt; return false">
<area href="#" shape="rect" alt="International" coords="0,0,298,200" onclick="document.getElementById('area').value = this.alt; return false">
</map>

<form action="">
<div>
<label>Area<input id="area" type="text"></label>
<button type="submit">Submit</button>
</div>
</form>

Just keep in mind that the JavaScript free folks will have to fill in the text box themselves. So give them the needed directions.