using maps

[greygirl]

Hi
I have a java server page where I bring in a state map with counties. when user clicks county it should be added to a list box. (I retrieve the array of county strings and pass the array to a java class)
1. How do I set up the attributes for the map. if it has to be clickable then I have to have a href. But i don't want the href to go to any other file or anything.
2. where do i call a function to add the county name into a list box.
Any help is appreciated.

 

[spazman]

in the <a you could use href=&quot;#&quot; which will go to the current page to and anchor without a name hence nowhere.

In the image map code put put onlick=&quot;MyMapFunction();&quot;

<map name=&quot;Map&quot;>
<area shape=&quot;rect&quot; coords=&quot;11,32,325,111&quot; href=&quot;#&quot; onlick=&quot;MyMapFunction();&quot;>
</map>

This should work. If Not let me know

 

[greygirl]

Hi spazman
It looks like it will work but I am not sure how to write the mapfunction(). Since fromObject is a map and toObject is a list box - help me a bit with the mapfunction.
I have the map code here underneath:

<table>
<tr>
<td width=&quot;40%&quot;>
<SELECT NAME=&quot;select1&quot; TITLE=&quot;Current Selections&quot; SIZE=&quot;5&quot; style=&quot;width:150&quot; MULTIPLE>
</SELECT>
</td>

<td>
<img src=&quot;./images/utmap.gif&quot; useMap=&quot;#FPMap0&quot; border=&quot;0&quot;>
<map name=&quot;FPMap0&quot;>
<area name=&quot;DUCHESNE COUNTY&quot; shape=&quot;POLY&quot; coords=&quot;217,190,217,130,269,104,277,112,275,190,219,190&quot; href=&quot;#&quot; onclick=&quot;mapFunction()&quot;>
<area name=&quot;WASATCH COUNTY&quot; shape=&quot;POLY&quot; coords=&quot;173,122,179,122,197,134,215,130,215,188,203,188,195,180,193,162,175,144,173,124&quot; href=&quot;#&quot; onclick=&quot;mapFunction()&quot;>
......
......
</td>
</tr>

I appreciate any help.
greygirl

 

[greygirl]

hi
Anybody - any feedback on this item?
Help!
greygirl

 

[starway]

First of all, you forgot about <form></form> tags.

<form name=form1>
<select name=&quot;select1&quot;>
. . .
</select>
</form>

You have to add an argument with name you're adding to every function call:
<area name=&quot;...&quot; . . . onclick=&quot;mapFunction('somename1')&quot;>


Then the function goes:

function mapFunction(name) {

//create new option
var newOpt = new Option(name, eval(&quot;location_&quot; + name));

//how many options are there now already?
n = form1.select1.length;

//add new option to <select>
document.form1.select1.options[n+1] = newOpt;

// requires to refresh the page
history.go(0);
}

I wrote this &quot;on the fly&quot;, so the script will probably require some debugging.

good luck

 

[greygirl]

Hi
var newOpt = new Option(name, eval(&quot;location_&quot; + name));
In this line what is this function eval - is it a javascript internal function? Also downbelow is part of the html code.
href=&quot;#&quot; - is that okay?
Thanks
greygirl

<map name=&quot;FPMap0&quot;>
<area name=&quot;DUCHESNE COUNTY&quot; shape=&quot;POLY&quot; coords=&quot;217,190,217,130,269,104,277,112,275,190,219,190&quot; href=&quot;#&quot; onclick=&quot;mapFunction('DUCHESNE COUNTY')&quot;>

 

[greygirl]

Hi Starway
I used your advice and this is what I have. When I click the area 'DUCHESNE COUNTY' in the map, for a second the select box has the 'DUCHESNE COUNTY' appear and then becomes empty. How do I keep clicking different counties and keep them getting added in the list box.

This is part of my html code:

<form action=&quot;areaMapShow.jsp&quot; name=&quot;mainForm&quot; method=&quot;post&quot;>
<div align=&quot;center&quot;>

<table>
<tr>
<td width=&quot;40%&quot;>
<SELECT NAME=&quot;select1&quot; TITLE=&quot;Current Selections&quot; SIZE=&quot;5&quot; style=&quot;width:150&quot; MULTIPLE>
</SELECT>
</td>
<td>
<img src=&quot;./images/map.gif&quot; useMap=&quot;#FPMap0&quot; border=&quot;0&quot;>
<map name=&quot;FPMap0&quot;>
<area name=&quot;DUCHESNE COUNTY&quot; shape=&quot;POLY&quot; coords=&quot;217,190,217,130,269,104,277,112,275,190,219,190&quot; href=&quot;areaMap.jsp&quot; onclick=&quot;copyItem('DUCHESNE COUNTY');&quot;>
<area ID=&quot;WASATCH COUNTY&quot; shape=&quot;POLY&quot; coords=&quot;173,122,179,122,197,134,215,130,215,188,203,188,195,180,193,162,175,144,173,124&quot;>
..........

This is my mapFunction:

function mapFunction(name)
{
var newOpt = new Option();
newOpt.value = name;
newOpt.text = name;
var n = mainForm.select1.length;
document.mainForm.select1.options[n] = newOpt;

}
Since I am almost there please help me out here! Thanks.
greygirl

 

[starway]

OK greygirl,
You are really *almost* there. Yuo should correct the following errors:

1.
<area name=&quot;DUCHESNE COUNTY&quot; shape=&quot;POLY&quot; coords=&quot;217,190,217,130,269,104,277,112,275,190,219,190&quot; href=&quot;areaMap.jsp&quot; onclick=&quot;copyItem('DUCHESNE COUNTY');&quot;>

You should not add any action or link to &quot;href&quot; attribute, bacause no javascript will be executed in such a case - the page will just be reloaded with another one. You should leave it as href=&quot;#&quot;. Using &quot;#&quot; is ok and it means that no link is associated with it.
Also, instead of &quot;copyItem&quot; you should write &quot;mapFunction&quot; as it is the one that adds a new item to <select>.

2.
In the mapFunction() body:
. . .
var n = document.mainForm.select1.length;
. . .

You should add &quot;document&quot; here to avoid &quot;mainForm is not defined&quot; error in Mozilla/N6.

3.
You didn't close your form with </form> tag.

After correcting all this I got a completely working page that adds options while you click on imagemap area. Tested in Opera 6, IE5 and Mozilla/N6.2

good luck